Using :last-child with class selector

I want to style the last/second .heading.

<ul>
    <li class="heading">Hell开发者_高级运维o world</li>
    <li>Hello world</li>
    <li>Hello world</li>
    <li class="heading">Hello world</li>
    <li>Hello world</li>
</ul>

Neither

ul li.heading:last-child {
    background: black;
}

nor

ul li.heading:nth-child(2) {
    background: black;
}

works for me. Why, and how can I apply styles to that <li>? It seems pseudo-class selectors doesn't work with class selectors. Which is weird since I could've sworn I'd used it before.

Update: Oops, totally forgot the jsfiddle.

Your statement was: "I want to style the last/second .heading."

That would mean that you would have to write your code like this:

<ul>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
</ul>

And the CSS:

ul li.heading:last-child {
    background: black;
}
ul li.heading:nth-child(2) {
    background: black;
}

Else, with your current html-code, you would write:

ul li.heading:nth-child(4) {
    background: black;
}
ul li.heading:nth-child(1) {
    background: black;
}

I understand your thought, but the lis with the class "heading" isn't the second or last child.

you can use ul li.heading:nth-of-type, It will consider only heading class as per your html css will

li.heading:nth-of-type(2){ background: black;}

or

li.heading:last-of-type{ background: black;}

ul li.heading:nth-last-child(2)

2 means you know how many of <li> are after your <li class="heading"> in our case it is second from bottom.

This is because li.heading is not the last-child nor is it the second child. It is the first and fourth child of the ul

Give this a try:

  ul li.heading:nth-child(4) {
    background: black;
}