CODEWITHSUNDEEP
htmlcss
Jimbo
Jimbo

Reputation: 81

Overriding Previous Background in CSS

So I'm having a problem and I think it may be that my understanding of css rules is lacking. Hopefully you guys can help me out!

span.medback {
background-color: FFFFCC; 
}
span.hiback {
background-color: FF3333;
}
span.item1 {
display: block;
background-color:#DCF0F7;
width: 75px;
height: 58px;
border: 1px solid #000000;
float: left;
padding: 5px;
text-align: center;
}
span.item2 {
display: block;
background-color:#DCF0F7;
width: 70px;
height: 58px;
border: 1px solid #000000;
float: left;
padding: 5px;
text-align: center;
}
span.item3 {
display: block;
background-color:#DCF0F7;
width: 90px;
height: 58px;
border: 1px solid #000000;
float: left;
overflow: auto;
padding: 5px;
}
span.item4 {
display: block;
background-color:#DCF0F7;
width: 170px;
height:48px;
border: 1px solid #000000;
float: left;
overflow: auto;
padding: 10px;
}
span.item5 {
display: block;
background-color: #DCF0F7;
width: 80px;
height:58px;
border: 1px solid #000000;
float:left;
padding: 5px;
}
span.item6 {
display: block;
background-color: #DCF0F7;
width: 30px;
height: 58px;
border: 1px solid #000000;
float:left;
padding: 5px;
}

span.item6 a img {
width: 20px;
height: 20px;
}
span.item1 a img {
width: 20px;
height: 20px;
}

span.item7 {
display: block;
background-color: #DCF0F7;
width: 30px;
height: 58px;
border: 1px solid #000000;
float:left;
padding: 5px;
}

Pardon the extremely long CSS line- its necessary to get an idea of my problem

<ul id="sortable" class="mainlist"><li class="listwrap" id="arrange_69"><span class="item1 "><a class="checkmarked" href=""><img src="" title="check" alt="check" /></a></span>
<span class="item2 ">&#x25B2; | &#x25BC;</span>
<span class="item3 ">monkey</span>
<span class="item4 "></span>
<span class="item5 "></span>
<span class="item6 "><a class="edit" href=""><img title="edit" alt="edit" src="" /></a></span>
<span class="item7 "><a class="confirm" href=""><img title="Delete" alt="Delete"src="" /></a></span></li>
<li class="listwrap" id="arrange_72"><span class="item1 hiback"><a class="checkmarked" href=""><img src="" title="check" alt="check" /></a></span>
<span class="item2 hiback">&#x25B2; | &#x25BC;</span>
<span class="item3 hiback">new</span>
<span class="item4 hiback"></span>
<span class="item5 hiback">Mar 25th 2014 12:30 PM</span>
<span class="item6 hiback"><a class="edit" href=""><img title="edit" alt="edit" src="" /></a></span>
<span class="item7 hiback"><a class="confirm" href=""><img title="Delete" alt="Delete"src="" /></a></span></li></ul>

My question is why doesn't the hiback class in the second li override the background color of the other elements? Is there a way that I can get that functionality? (rewriting the whole thing is an option if its designed poorly) Thanks for your help!

Upvotes: 0

Views: 57

Answers (2)

Barbara Laird
Barbara Laird

Reputation: 12717

Your first problem is that these should have # signs for the colors:

span.medback {
    background-color: #FFFFCC; 
}

span.hiback {
    background-color: #FF3333;
}

Second, you should move the definition of these after the definition of the item classes.

Fiddle: http://jsfiddle.net/ybJGw/

Upvotes: 1

Quentin
Quentin

Reputation: 943240

Because:

  • Your rules for the hiback class are invalid, you are missing a # from the colour code
  • The selectors are equally specific
  • When selectors are equally specific, the last one gets applied last (overriding the earlier ones)

Upvotes: 2

Related Questions