I'm creating a navigation bar and its made using an unordered list. I want to override my style for the first one so it looks different. I tried changing its class, but the actual style overrides it. Thanks
Add a comment
|
3 Answers
CSS is order-sensitive.
If you define the styles for the first element, and then define the styles for all elements, then the styles for all elements will take precedence, even for the first element.
Alternatively, if you define the styles for all the elements first, and then define the styles for the first element, then the styles for the first element will take precedence over the styles for all elements when the browser gets around to figuring out how to render the first element.
2 Comments
Dan Beam
not always - consider
.className { color: blue; }, element { color: red; }, <element class="className">this will still be blue!</element>!Dan Beam
also, the use of
!important throws these off, and can lead to ignoring other properties completely (like I already mentioned)In the style declarations, use !important, like this:
.myFirstOne {
color: blue !important; /* for example */
}
Make sure you put the !important last. Is there a way you can factor the attributes out of the style attribute and into a class? That would be a cleaner and less tedious way of doing it, as !important must come after every declaration.
See this link for more information on CSS cascading rules.
3 Comments
bendewey
+1 Maybe not the best solution to the problem, but sometimes the easiest solution can be the best.
Dan Beam
this is not the best way to do this. !important is ignored by some browsers, and IE6 has a bug where the order of !important properties IS NOT preserved, so if you declare and !important style and attempt to redeclare it later, IT WILL NOT WORK.
Lucas Jones
I don't perfer using !important I'd rather put a class on the first element and style it as such:
<!-- html -->
<ul>
<li class="first">first item</li>
<li>second item</li>
<li>third item</li>
</ul>
/* css */
ul li {
color: blue;
}
ul li.first {
color: red;
}
