CODEWITHSUNDEEP
csscss-selectors
Mindi Torrey
Mindi Torrey

Reputation: 325

CSS last-of-type with multiple selectors

I want to select two elements using last-of-type, but I don't know what the correct syntax is. If this is the html:

<div class="Box">
    <book class="small"/>
    <book class="small"/>
    <notes/>
    <notes/>
    <toy class="small"/>
    <toy class="small"/>
</div>

I want to select the last book and last toy in the Box, what is the syntax? I though it would be:

div.Box book.small, toy.small:last-of-type { }

But this is apparently not correct.

Upvotes: 2

Views: 548

Answers (3)

Will Nations
Will Nations

Reputation: 71

Since January 2021, the now cross-browser supported :is() and :where() pseudo-selectors allow you to improve this even further by combining the two rules:

div.Box :is(book,toy).small:last-of-type {
    /* styles */
}

Upvotes: 1

Alessio Cantarella
Alessio Cantarella

Reputation: 5201

You have to apply the property last-of-type to both the selectors:

div.Box book.small:last-of-type, toy.small:last-of-type

Upvotes: 1

Linus Caldwell
Linus Caldwell

Reputation: 11058

Try

div.Box book.small:last-of-type,
div.Box toy.small:last-of-type {
    /* styles */
}

Here is a Fiddle.

Upvotes: 4

Related Questions