Came across a situation using large grids of mixed types of elements, where it would be nice to have :next-of-type
as a pseudo-class. My definition of that would be the next sibling that is of the same type as the element selected by the selector to which :next-of-type
is appended. (I suppose it would also be nice to have :next-child
, :next-of-class
, etc. And prev-child, prev-of-type, prev-of-class, etc.)
Couldn't find such a thing in the CSS documentation, so I guess it doesn't exist. I spent some time trying to synthesized it out of what does exist, and failed.
Not sure if this is solvable, maybe only by the W3 CSS working groups...
As an example, assume you have a large grid of elements. For simplicity, I'll just use two in the example, but my actual case has a dozen or more different types of elements. I'll number the elements content in the order they would exist in the HTML, but due to grid placement algorithms (not demonstrated here) the items might not actually appear in a different order than in the HTML. Nonetheless, the sequence of items in the HTML is of interest to the selection plan. I'll use <a->
and <b->
for the (custom) elements.
<div style="display: grid;">
<a->1</a->
<a->2</a->
<b- class="special">3</b->
<a->4</a->
<a- class="ordinary">5</a->
<a- class="surprise">6</a->
<b->7</b->
<b->8</b->
<a->9</a->
</div>
So it would be nice to have a way to specify .special:next-of-type
and select item 7, .ordinary:next-of-type
would select item 6, and .surprise:next-of-type
would select item 9.