Question

• Home
• Option 1
• Option 2

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 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.