sipsorcery
sipsorcery

Reputation: 30699

CSS rule to style first list item

I'm attempting to get a CSS style to apply to the top list item but can't get the rules to apply in the desired fashion. In the example below I'm trying to remove the top border for the very first li item. It works if I put style="border-top: none;" inline on the locationMenuTopItem element but I need to do it with a style block.

Why is the #locationMenu li block overruling the #locationMenuTopItem block?

<html>
<head>
 <style>
 #locationMenu li {
    border-top: 1px solid #e1e1e1;    
}

#locationMenuTopItem {
   border-top: none;
}
</style>
</head>
<body>
<ul id="locationMenu">
     <li id="locationMenuTopItem"><a href="#">Top Menu</a>
         <ul>
           <li><a href="#">Sub Menu 1</a></li>
           <li><a href="#">Sub Menu 2</a></li>
           <li><a href="#">Sub Menu 3</a></li>
         </ul>
     </li>
     <li><a href="#">Top Menu 2</a></li>
     <li><a href="#">Top Menu 3</a></li>
   </ul>
</body>

Upvotes: 5

Views: 27865

Answers (3)

Marnix
Marnix

Reputation: 6547

This could be a possible answer:

#locationMenu li,
#locationMenu li:first-child ul li
{
    border-top: 1px solid #e1e1e1;    
}

#locationMenu li:first-child
{
    border-top:none;
}

It is overrulie, because the #locationMenu li is deeper than #locationMenuTopItem alone. The more statements in a row, the deeper it is.

Upvotes: 5

Quentin
Quentin

Reputation: 943759

Why is the "#locationMenu li" block overruling the #locationMenuTopItem block?

It is more specific

#locationMenu > li:first-child 

should do the job without having to add additional ids. (Although not in IE6)

Upvotes: 14

Yi Jiang
Yi Jiang

Reputation: 50115

Because of CSS specificity - the selector #locationMenu li is more specific than #locationMenuTopItem. Using #locationMenu #locationMenuTopItem will work here.

Here's a graphical guide from Andy Clarke that will help: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Upvotes: 1

Related Questions