need to override a CSS background color

Question

so I have the following

.select, 
.input, 
.schedule, 
.editableFields 
{
cursor: pointer;
background-color: blue;
}

and this overrides the following:

#past .layer.color {        
background-color: #E5D403 !important;   /*this needs to be the first priority color*/
 }

EDIT: If I just have this second CSS, it does work! But when I add the blue it colors all it needs to and OVERRIDES #past (I dont want it to do this!) But I need the second background-color to override the first background-color. I have tried giving it lots of IDs and lots of classes and also using !important, but nothing seems to work...please help! (I don't know if it matters, but I am also using twitter bootstrap, but I have all of my css rules in a custom.css)

I also tried adding an inline css to the html. There is a ton of html, so I'll just put the top part

<div class="accordionGroups">
            <div class="accordionHeading">
                <a class="accordion collapsed" data-toggle="collapse"
                    data-parent="#mainAccordion" data-target="#collapseThree"> <i
                    class="twistyIcon"></i> Layers
                </a>
            </div>
            <div id="collapseFirst" class="accordion-body collapse">
                <div class="accordion-inner scrollable">
                    <ul id="layers-dropdown-menu">
                       <li><label class="checkbox" id="past"> <span class="layer color legend"></span> Past
                       </label></li>

as background-color:#E5D403 but it gave me an error and Im not sure why (maybe I put it in the wrong place in the html?)

The following doesn't work either:

.checkbox span .layer.color.legend
{
 background-color: #E5D403 !important;
}

Solution 1

I finally figured it out, guys. I couldn't fix this error from within the CSS. Since my page was being dynamically updated, I had to fix this in javascript, when I was creating each of the rows.

if(notYellowRow){
    $row.find('.select').css('background-color', 'blue');
    $row.find('.input').css('background-color', 'blue');
    $row.find('.schedule').css('background-color', 'blue');
}

Solution 2

This doesn't work?

#past {        
   background-color: #E5D403 !important;
}

Comments

[Tushar Gupta - curioustushar]

post your full html code where is class .layer

[Mohammad Areeb Siddiqui]

What's the first background color and the second one?

[harryg]

Those CSS rules are selecting different elements so one would not be overriding the other. Ensure you are selecting the correct element in your css

[insanityCode]

there is no overriding in the above css. Give the full html and explain yourself better.

[user2847749]

@tusharGupta, I have posted the first part of my html. the entire file is huge, but this should be sufficient.

[Reinstate Monica Cellio]

How is this html relevant to the rest of the question? I see absolutely no correlation between css and markup.

[user2847749]

I'm trying to make the id "past" (from the html) background color override the first css I have up there.

[Blazemonger]

The #past .layer.color span doesn't actually contain anything.

[user2847749]

but if i do not have the first background-color, it shows up perfectly. so it does contain it. I just need the past .layer.color to supersede the first css condition. the colors are for different situations.

[user2847749]

I have edited my question again

[Reinstate Monica Cellio]

.layer .color means an element with the class color inside an element with the class layer. .layer.color means an element that has both classes.

[Murali Murugesan]

@Archer, his initial HTML shown layer class wraps color class. So I advised him to use in such a way#

[Reinstate Monica Cellio]

He's never posted any html with those class names, and besides, my comment was directed at your answer before you modified it.

[user2847749]

This does not work either. I am not sure what is going wrong.

[Murali Murugesan]

@user2847749, updated the answer with HTML and CSS. Your text is not inside span.

[user2847749]

@Murali, the ID is within the span. The text is merely a label

[Shauna]

You can put a picture up on Photobucket or some other external image host and link to it. I also recommend getting a jsfiddle.net post up that shows the behaviors you're seeing. The code you've provided doesn't even give me the goldenrod color if I do it myself.