How to select first a element of li with CSS?


Tags: css,nested-lists,css-selectors

Problem :

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.



Solution :

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.


    CSS Howto..

    How to update element.styles css

    How to define alternative font-family corresponding to font-size CSS

    asp.net+css+jQuery - how does it all work together?

    How to create a margin between two seperate divs?

    How to style Anchor in GWT?

    $(document).on(“click”… how to collapse a list when clicking anywhere else on the document

    How to reposition CSS-hover popups to stay within a fixed frame?

    How to count the number of correct answers using Javascript?

    How can I make this menu's “clear:both” work in Google Chrome?

    How to make a multi step header

    How Can I Make An Odd Shaped Icon into a “Circle”?

    How to replace a text-align: -webkit-center?

    How to fade background images (from CSS) in and out with jquery

    How to reverse a sequence of CSS transitions and transforms which contain span:nth-child

    How to mark up a tiled layout with CSS?

    How make to flow around a triangular block?

    How fix labels placement so them not overlap in DevExpress js chart?

    How to apply a defined class to a new class in my css?

    How do I achieve this particular hover effect?

    Hide the element, but show for that place blank

    How can I write CSS that only applies to specific browsers?

    How to add CSS class attribute for Html helper methods in asp.net mvc (VB.NET)?

    How to expand CSS column to available space?

    CSS: how to stop text from taking up more than 1 line?

    How to pinch the middle of a line in css

    iOS How to access Library in CSS Url's?

    How to make a div that appear on hover, stay while its hovered on in jquery or css

    How semantic X/HTML can save time when we will write CSS?

    how to Load a css file for html page android web view

    How to stretch a background-image with css