First- and last-of-type pseudo selectors.

[gulliver]

I need a little confirmation/clarification…

If I’ve understood things correctly (relatively rare, nowadays), the pseudo selectors ‘:first-of-type’ and ‘:last-of-type’ apply only to elements and not classes, and match every element that is the first/last child, of a particular type, of its parent.

So, if I used the code below, expecting it to apply to just the last p in ‘div class=”example”‘, I’d get unwanted results elsewhere… because, rather than confining the treatment to ‘the last p in the div with a class of ‘example’, instead every ‘p’ that is the last in its parent div would also be affected?

div.example p:last-of-type
{
/* css declarations; */
}

That seems right – in which case I can’t use it and have to find an alternative to target just a specific div.

[Paulie_D]

I think you have grasped it.

The nth-of-x selectors are incredibly generic and usually need additional specificity to make sure they don’t also select other elements.

Take your div.example p:last-of-type example.

Yes, this will target the last paragraph in the div with a class of example… but it won’t stop there.

It will also target the <p> in this structure…

<div class="example">

  <p></p>
  <p>Selects this</p>

  <div class="other">
    <p></p>
    <p>And this</p> /* I'm the last <p> tag that is also a descendant of the example div */
  </div>

</div>

…because we haven’t been specific enough in the selector.

[gulliver]

@ Paulie_D… thanks.

With ‘need additional specificity’, can I (and if so, how) specifically target a single div with a first/last of type?

[Paulie_D]

Use the other selectors available to you. >, ~ & + etc.

This div.example p:last-of-type is different from div.example > p:last-of-type for instance.

Or just add additional classes as needed

But in general, I’d avoid them nth unless you really can’t do it any other way.

[gulliver]

@ Paulie_D… thanks.

My css knowledge is relatively little, and so I’ll learn more about your suggestion… and certainly avoid using ‘nth-of-x’.

Currently, if I’ve understood, I don’t see a way to do what I’d originally hoped to do… confine the style to an element within a specific div (in this case: the last p in ‘div class=”example”), and not have other divs also affected.

UPDATE: I think I may still be misunderstanding this… a simple Codepen test (https://codepen.io/glvr/pen/RZPzME) suggests desired behavior can be targeted and confined to a specific div.

[bearhead]

In your example, you’re not applying the last-of-type selector to a specific class, instead you are applying it to last child p element of a given div with a specific class.

BUT

You should be able to accomplish what you are after… in fact you have the correct css for such in your demo. div.test2 p:last-of-type.

Just note that the last of type selector is being applied to the p element and not the div.

[gulliver]

@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?

[bearhead]

yes, p.test:last-of-type {color: yellow;} means apply yellow color to the last p with class test.

The class isn’t ignored… it is important to raise the specificity of your selector, maybe the below example will clarify:

The last-of-type selector targets the last type of an element. So if you were to write the selector as just .test:last-of-type and then have a p element followed by a span in your html (both with class test), both would be changed to yellow.
example:

https://codepen.io/kvana/pen/zdvJwj

but if you write p.test:last-of-type, only the last p with class test will be yellow. That’s what I mean by the last of type targets elements and not classes.

[Paulie_D]

but if you write p.test:last-of-type, only the last p with class test will be yellow. That’s what I mean by the last of type targets elements and not classes.

Not quite…although it might be the way it’s worded

p.test:last-of-type will only select an element if it is both the last one AND has a class of test.

https://codepen.io/Paulie-D/pen/WEQaYa

Otherwise it’s trying to select nth-of-class…which does not exist.

[gulliver]

@bearhead and @Paulie_D…

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

[Author]

Posts