Menu
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>
768
The :first-of-type selector in CSS allows you to target the first occurence of an element within its container. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.
To specify the style for a list, use the list-style property to specify the type of marker. The selector in your CSS rule can either select the list item elements li , or it can select the parent list element ul so that its list elements inherit the style.
The :first-child selector allows you to target the first element immediately inside another element.
In CSS, p is a type selector for the HTML element, or node type, <p> (paragraph). Any HTML element type can be used as a CSS selector. body { } div { } ul { } li { } /* and so on */
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)
75
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.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
