Search code examples
csscss-selectors

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.

Solution

  • 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