Menu
I'm trying to select the first anchor tag of a nested li menu tree:
<div class="footermenu">
<ul class="menu">
<li class="expanded first">
<a href="link.html">First menupoint</a>
<ul class="menu">
<li class="first"><a href="#">First submenupoint</a></li>
<li><a href="#">Second submenupoint</a></li>
<li><a href="#">Third submenupoint</a></li>
<li class="last"><a href="#">Fourth submenupoint</a></li>
</ul>
</li>
<li class="expanded last">
<a href="link.html">Second menupoint</a>
<ul class="menu">
<li class="first"><a href="#">First submenupoint</a></li>
<li><a href="#">Second submenupoint</a></li>
<li><a href="#">Third submenupoint</a></li>
<li class="last"><a href="#">Fourth submenupoint</a></li>
</ul>
</li>
</ul>
What I'm trying to accomplish is to select only the first anchor tag of the main menupoints.
My css is:
div.footermenu li.expanded a:first-child {
font-weight: bold;
}
The problem is that this CSS still selects the submenupoints and I don't know why.
821
You want to use div.footermenu li.expanded > a:first-child
jsFiddle
http://jsfiddle.net/eRTV6/
div.footermenu li.expanded > a:first-child {
font-weight: bold;
}
Your original selector will select all anchor elements which are first-children of li.expanded, by adding a direct descendant selector, >, you specify that you only want to select the first, direct descendant of li.expanded which are anchors.
83
Try this:
<html>
<head>
<style TYPE="text/css">
div.footermenu li.expanded>a{
font-weight: bold;
background: Red;
}
</style>
</head>
<body>
<div class="footermenu">
<ul class="menu">
<li class="expanded first">
<a href="link.html">First menupoint</a>
<ul class="menu">
<li class="first"><a href="#">First submenupoint</a></li>
<li><a href="#">Second submenupoint</a></li>
<li><a href="#">Third submenupoint</a></li>
<li class="last"><a href="#">Fourth submenupoint</a></li>
</ul>
</li>
<li class="expanded last">
<a href="link.html">Second menupoint</a>
<ul class="menu">
<li class="first"><a href="#">First submenupoint</a></li>
<li><a href="#">Second submenupoint</a></li>
<li><a href="#">Third submenupoint</a></li>
<li class="last"><a href="#">Fourth submenupoint</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
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
