Override a CSS layout

Question

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

Answer 1

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.

Answer 2

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.

Answer 3

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;
}