Clarification needed on 'last-of-type' pseudo-selector

Not having previously used it, I’m confused.

I’ve read ‘:last-of-type matches an element which is the last element of its type (tag) within its (first-level) parent. It doesn’t apply to classes.’

A simple Codepen demo (https://codepen.io/glvr/pen/RZPzME) suggests it can target classes, so that specific behavior can be applied to elements of specific class within divs of specific classes (which to me, seems logical).

I welcome clarification from someone who knows. :wink:

I’m unclear what you’re confused about, seems like you not only answered your own question but created a demo to boot!

Pseudo-selectors apply to any other selector, elements, #ID's, .classes, [attributes], and even other :hover:psudeo-selectors.

Edit: They also apply to psuedo-elements, like :before and :after

1 Like

@OzRamos… thanks.

Part of my confusion is from lack of confidence, because I find much of this difficult - and when I read ‘doesn’t apply to classes’ from others who know more, I usually accept it. In not seeming logical to me (if you can’t target specifically by element and class, unwanted behavior will affect other elements, and that seems daft), I did the demo to learn more and try things.

The fact is, it applies to the last of any type, but you don’t necessarily need to use that type in your selector.
In all you examples they are <p> elements, and those elements (or any other type of element) will still be selected as the last of their type. Adding classes to your selector (with or without an element type) simply narrows the scope of your selection.

I made two additions that don’t use elements in the selectors. Maybe that will clarify a bit how it works.

1 Like

Just re-iterating what Sam said :slight_smile:

Last of type refers to the last type of that element in the current selection (regardless of what class you prefix to it although the class will have a bearing on what eventually gets styled).

e.g.

<p class="test">Paragraph 7.</p>
<p class="test">Paragraph 8. (won't be yellow.)</p>
<p>test no class ...</p>

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

None of the above items will be yellow.

The last of type matches this element: <p>test no class ...</p> in the above but as it doesn’t have a class of .test then nothing is styled. The rule does not search for the last item with a class of .test but looks for the last element of that type and then if qualified with that class you specified it will style it.

5 Likes

@SamA74 … thanks. That helps me further.

So, if I correctly understand… a class in the css doesn’t determine which element is targeted, it simply sets the appearance of that element.

Although last-of-type ignores classes in the css rule and applies to the last of that element, the appearance of that element can be determined by adding a class to the css and the same class to the element html.

In your example…

Adding p class=“class” after all preceding text makes that the last-of-type (and hence color pink).

And, if p class=“mixed” was then added (after p class=“class”) it would become the last of type (and hence color orange).

And, in adding either of these p elements, paragraph 8 (which had previously been the last in its parent (body) is no longer last (and hence reverts to normal color).

So, long-story-short… css of ‘p:last-of-type {color: red;}’ applies to the last p of its parent and is red. And, by adding a class (in the css and html) to the p, the color of that last p can be changed - example: ‘p.blue :last-of-type {color: blue;}’.

I’ve explained this poorly and labored the point, but I think I at last get it.

@PaulOB… thanks for further clarifying.

I think I’ve a follow-on question - which I’ll delay until after I’ve thought more… currently my brain has faded from thinking about this. :slight_smile:

Not a helpful example as the class is unnecessary in that situation.:slight_smile: The last-of-type in that sequence is styled whether or not you give a class to it.

If you use p.test:last-of-type {color: red;} and the last item did not have that class then nothing gets styled. Alternatively if you just used p:last-of-type {color: red;} then the last item gets styled whether or not is has the class.

It is only useful to target via class using the last-of-type when you only want the last element styled ‘if it has the class’. There are not many occasions when you would want to do that as usually you just want the last of type which p:last-of-type will do for you.

When using classes and last-of-type the main thing to remember is that last-of-type refers to the element that the class belongs to. The browsers sees that ‘.test’ is attached to a p tag and then looks at all p tags in that section and if the last p tag also has the class of .test then the rule is applied.

That’s why in Sam’s demo he also applied the class of ,test to a span in the same section and the browser then looks at all spans also and finds the last one and styles it if it has the class present.

So to recap:

1)
p:last-of-type {color: red;}

Find the last p tag in that section and style it red.

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

Find the last p tag in that section and style it red only if it has a class of .test.

.test:last-of-type {color: red;}

Find out which element (or elements) .test is applied to and then look for the last of type of that element(s) and style it only if it also contains that class.

3 Likes

Thanks Paul, for further clarifying. (And I’m sorry for the slow reply - I’ve been away.)

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.