Question

I have a structure:

<div id="div">
    <ul class="ul">
        <li class="li_one">
        </li>
        <li class="li_two">
        </li>
    </ul>
</div>

I want to set background:red to the second li element (class “li_two”) using pseudo-selectors and want to begin from the most outer div. I’m trying to this way:

#div > ul:nth-child(1) { background:red; }   // works but wrong, sets background to ul
#div ul:last-child { background:red; }   // doesn't set to any element
#div ul:first-child { background:red; }  // again sets to ul but not to li
#div [class=li_two] { background:red; }  // only this one works fine

Is it possible to set style to li_two from #div using :nth-child or :last-child or :first-child selectors? How to do it?

Answer 1

#div li:last-child

Your 2nd option was almost right 🙂 I think you misunderstood what last-child does. xx:last-child It doesn’t select the last child element of element xx; it selects every xx element that is the last child of it’s parent.

Some reading.

I’ve created a JSFiddle for you to test it