Behaviour of last-child

Question

Why is the last p not highlighted?

w3schools says:

Specify a background color for the p element that is the last child of its parent

So the last p should be highlighted right?

<style> 
div p:last-child {
    background: #ff0000;
}
</style>

<div>
  <p>The first paragraph.</p>
  <p>The second paragraph.</p>
  <p>The third paragraph.</p>
  <p>The fourth paragraph.</p>
  <span>The first span.</span>
<div>

for you saying, use this - that is not my question:

div p:last-of-type {...}

Answer 1

Last-child is not selecting what you're expecting it to select (You need last-of-type, instead). The last-child property only applies to elements that are the last child element of their parent container. In your case, span is the last-child:

<div>
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <p>The third paragraph.</p>
    <p>The fourth paragraph.</p>
    <span>The first span.</span> <!-- this <span> is the "last-child" -->
<div>

So the CSS selector p:last-child {} doesn't have anything to select, because it's looking for the last child of a container that is also a <p> element. Here is a more concrete, real-world analogy:

You have three children:

• Jack, aged 17
• Susan, aged 14
• Alex, aged 10

In markup, this looks like:

<mother>
    <jack>17</jack>
    <susan>14</susan>
    <alex>10</alex>
</mother>

A blank :last-child {} selector will select Alex, because he's the last child you had. However, you are trying to select the last child of a certain type, in this case we'll say their name is the type. Susan:last-child, then, won't work, because even though Susan is the last of your children to be named Susan (e.g. to have type name of "Susan"), she's not the last child you've had.

If you use last-of-type instead, it will work, because the fourth p is the last-of-type p.

Answer 2

It's worth mentioning that W3Schools is an external resource. It isn't the official CSS documentation. The :last-child pseudo-class is defined in the CSS Selectors specification here: http://www.w3.org/TR/css3-selectors/#last-child-pseudo. This specification states:

The :last-child pseudo-class represents an element that is the last child of some other element.

:last-child selects specifically the last child. Here p:last-child would apply styling to a p element only if it is the last child. In your case, span is the last child, not p, therefore there's nothing for your selector to select.

Example 1

<div>
  <p>Foo.</p>
  <span>Bar.</span>
<div>

Here span is the last child, not p. p:last-child would not select anything.

Example 2

<div>
  <p>Foo.</p>
  <span>Bar.</span>
  <p>Baz.</p>
<div>

Here p is the last child, so p:last-child would select the last p element (whose text here is "Baz.".

This behaviour is exactly why the :last-of-type selector exists. :first-child and :last-child will always only look select the first or last child.