How to override priority in CSS classes?

Question

Hi, I have this HTML

<div id="contentheader">
    <div class="cat">
     <ul>
      <li>
       <a href="http://127.0.0.1/test/" title="Home">Home</a>
      </li>
      <li>
       <a href="http://127.0.0.1/test/option1/" title="Option 1">Option 1</a>
      </li>
      <li>
       <a href="http://127.0.0.1/test/option2/" title="Option 2">Option 2</a>
      </li>
     </ul>
    </div>
</div>

And I apply the styles with this classes

#contentheader .cat {
border-top:3px solid #ccc;
background-color:#eee;
overflow:hidden;
}

#contentheader .cat li a {
color:#999;
font-weight:700;
text-decoration:none;
font-size:13px;
display:block;
border-right:1px solid #fff;
float:left;
padding:10px;
}

#contentheader .cat li a:hover {
background-color:#E9E9E9;
}

The problem is that I need the first <li> (Home) to be different, maybe making the text in other color, or maybe making the font wider. I try assigning a class directly to the <li> or the <a> tags, but it doesn't works, it always take the styles in the #contentheader .cat li a class. What is the best way to do this? Thanks

Answer 1

You can use the :first-child selector in css:

#contentheader .cat ul li:first-child a {
    color: red;
}

That finds the first li child of the ul. Just make sure it comes after the general li case so that it takes precedence or use the ! important modifier on the color/size definitions.

Answer 2

You need to increase the specificity of that selector to have it override a rule with a lower selector specificity.

So if you assign the class to the li element, use #contentheader .cat li.class a, for the a element, use #contentheader .cat li a.class.