The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS First- and last-of-type pseudo selectors. Reply To: First- and last-of-type pseudo selectors.


@bearhead… thanks.

Your point of ‘note that the last of type selector is being applied to the p element and not the div’ helps me to understand.

But I’m still confused by this…
With html and css of:

<p>Paragraph 7.</p>
<p>Paragraph 8.</p>

p.test:last-of-type {color: yellow;}

Paragraph 8 (last of type in parent body) is normal color – why?

Without the pseudo-selector it seems logical… ‘apply to any/all p-elements of class=”test”, and make them yellow’. So as there are no p-elements of that class, there’s nothing to apply the rule to and the text is normal color.

But, if I’ve understood correctly…
In ‘p.test:last-of-type {color: yellow;}’, ‘.test’ is ignored.
So the rule is applied (as ‘p:last-of-type {color: yellow;}’) to the last p (regardless of class) in the parent – in this case, paragraph 8… in which case, why isn’t it yellow?