Search code examples
htmlcsscss-selectorspseudo-class

Syntax for CSS :last-child - won't work on my code

I use the following code on my website:

<div id="sidebar">
    <h1>Headline</h1>
    <ul class="nav">
        <a href=""><li>News</li></a>
        <a href=""><li>Unternehmen</li></a>
        <a href=""><li>Shop</li></a>
        <a href="" target="_blank"><li>Werbung</li></a>
    </ul>
    <h1>Mediathek</h1>
    <ul class="nav">
        <a href=""><li>one</li></a>
        <a href=""><li>two</li></a>
        <a href=""><li>three</li></a>
    </ul>
    <h1>Jobs</h1>
    <ul class="nav">
        <a href=""><li>Außendienstmitarbeiter</li></a>
        <a href=""><li>Ausbildung</li></a>
        <a href=""><li>Studentenpraktikum</li></a>
    </ul>
</div>

Now I'm trying to select every last li-element in the ul.nav lists. It won't work after several attempts. I hope someone could help!

Solution

  • That's probably because you've put the li in a a.

    With this construct, you need

    ul.nav a:last-child li

    But you should put the a inside the li and then do

    ul.nav li:last-child

    Both in HTML4 and HTML5, a li element cannot be in any kind of element :