Home/ Questions/Q 3943364
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T00:46:24+00:00

I’m attempting to get a CSS style to apply to the top list item

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0