DEV Community

CSS: select first-of-class with the subsequent sibling combinator

Phil Nash on March 18, 2018

There are a whole bunch of CSS selectors available to web developers, but sometimes there's still not enough. I found this recently when building t...

Read full post

Mattia Astorino • Mar 21 '18 • Edited

Hi, after some test, i found an alternative solution (i think)

codepen.io/equinusocio/pen/NYpegd

<div class="cont">
    <div class="box">box</div>
    <div class="box">box</div>
    <div class="box box--special">box</div>
    <div class="box box--special">box</div>
    <div class="box box--special">box</div>
    <div class="box box--special">box</div>
    <div class="box box--special">box</div>
    <div class="box box--special">box</div>
</div>

.box {
    width: 100px;
    height: 100px;
    padding: 8px;
    background-color: yellowgreen;
    margin: 10px;
}

.box--special {
    border: 1px solid #000;
    background-color: #fff;
}

.box--special + .box--special:not(:last-child) {
    background-color: red;
    color: #FFF;
}

Phil Nash • Mar 22 '18

That doesn’t do the same, notably the + combinator is the direct sibling, so if you throw another <div> in the middle with a different class it breaks.

Mattia Astorino • Mar 22 '18 • Edited

Yes i know. But both solutions have caveats since even with the subsequent sibling the code will break if you use another element type (because you are bound to type of the element).

BTW, nice exploration, thank you :)