0

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.

9
  • 1
    This question is off-topic for Stack Overflow as it's more of an idea discussion, but fundamentally these pseudo-classes would match different elements than the one represented by whatever you "attach" them to, and so wouldn't be compatible with CSS's definition of "pseudo-class" or indeed "simple selector". For example, .special:next-of-type doesn't match that .special, it matches another element altogether. A human reading that might intuitively understand what it does, but it still doesn't jive with the selector syntax, and I don't think the CSSWG will support it for that reason.
    – BoltClock
    Feb 26, 2019 at 18:14
  • (Well, the "can it be synthesized" part is on-topic, but the answer is "no" and the remaining discussion seems to detract pretty heavily from that anyway...)
    – BoltClock
    Feb 26, 2019 at 18:15
  • 1
    I'm voting to close this question as off-topic because it's a spec recommendation more than a programming issue (what BoltClock said). Feb 26, 2019 at 18:38
  • @BoltClock, Not sure I've intuited the CSS definition of "pseudo-class" such that :next-of-type would be incompatible with it. Do you have a spec reference? A selector is a way of selecting things, and indeed, people give directions by saying "turn left at the 2nd street after the traffic signal", so I think it is an understandable concept, as well as implementable, but maybe it does break some philosophy, as you suggest (but I'd like to see the text that makes you think so).
    – Victoria
    Feb 26, 2019 at 23:04
  • Yes, the "can it be synthesized" is why I asked the question here: just because I failed to synthesize it, doesn't mean someone else couldn't. + and ~ implement similar concepts, but not exactly this one. The problem I'm facing could be solved by insuring that all the elements of like type are siblings (but that would disturb the placement algorithm, and I couldn't figure out a solution for that either), or by running some javascript that alters/augments the class tags (and I did solve the issue that way, but would have preferred a CSS solution).
    – Victoria
    Feb 26, 2019 at 23:08

2 Answers 2

0

To expand on my comments:

Fundamentally, pseudo-classes that match "next" and "previous" elements would match different elements than the one represented by whichever compound selector you "attach" them to, and so wouldn't be compatible with CSS's definition of "pseudo-class" or indeed "simple selector"/"compound selector".

Selectors L4 describes simple selectors and compound selectors as conditions matching simultaneously against a single element. By this definition, a selector like .special:next-of-type is only going to work if the next element of that type also matches .special. It'd then match recursively, resulting in all of .special ~ .special except the first of each element type in each parent element. Critically, it would not work at all in your case, as item 7 does not match .special.

A human reading that selector might intuitively understand what it does, but it still doesn't jive with the selector syntax, because for it to work you'd need to define :next-of-type as a special pseudo-class that ignores or matches separately from the rest of the compound selector, contrary to how it's been defined in the spec. This means added complexity for selector matching algorithms. A similar complexity can be seen in jQuery's :eq() family of selectors — there's probably a good reason those selectors haven't been standardized.

Additionally, something like :next-of-type is not a condition for an element, but establishing a relationship between that element and some other element. In Selectors, relationships between two or more different elements are represented with combinators. A "next sibling of type" combinator would make light work of this task without fundamentally changing how selector matching works (e.g. .special ~~ *), but one does not exist in any Selectors spec, and I can't see use cases such as this one being common enough for the CSSWG to justify designing, testing and implementing it. And without such a combinator, you'd need to know the element type in advance in order to determine the next sibling of that type, and that can't be accomplished using selectors available today, not even including L4 :nth-child(An+B of S).

So the answer to

can ":next-of-type" be synthesized?

is no, not with selectors available today, and a solution that would work with the existing selector syntax is to introduce a combinator with this exact functionality.

1
  • OK, thanks for the reference, which I read in-line with your text, and as I did, realized that to fit those definitions, what would be needed is a combinator. And finishing reading your answer, you arrived at the same conclusion. So your definitional concern expressed earlier in comments was just syntactical, not functional... had I invented combinator syntax instead pseudo-element syntax, your comments would have been different, and had you mentioned combinator as the alternative they would have been more clear. Thanks for elucidating.
    – Victoria
    Feb 27, 2019 at 18:34
0

So it is possible, but in addition to knowing a complete list of the types of elements in the grid, and a maximum span of elements between elements of the same type, it would be really handy to have a macro-processor to generate the synthesized solution.

The snippet below deals only with two types of elements, and a maximum of 5 elements between elements of the same type, but could obviously be laboriously extended in either dimension.

      .container {
        display: grid;
        font-size: 30px;
        grid-template-areas:
          ". . ."
          ". . ."
          ". . .";
      }
      .special ~next-of-type { color: red; }
      a-.special + a- { color: red; }
      a-.special + :not( a- ) + a- { color: red; }
      a-.special + :not( a- ) + :not( a- ) + a- { color: red; }
      a-.special + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: red; }
      a-.special + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: red; }
      a-.special + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: red; }
      b-.special + b- { color: red; }
      b-.special + :not( b- ) + b- { color: red; }
      b-.special + :not( b- ) + :not( b- ) + b- { color: red; }
      b-.special + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: red; }
      b-.special + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: red; }
      b-.special + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: red; }

      .ordinary ~next-of-type { color: blue; }
      a-.ordinary + a- { color: blue; }
      a-.ordinary + :not( a- ) + a- { color: blue; }
      a-.ordinary + :not( a- ) + :not( a- ) + a- { color: blue; }
      a-.ordinary + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: blue; }
      a-.ordinary + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: blue; }
      a-.ordinary + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: blue; }
      b-.ordinary + b- { color: blue; }
      b-.ordinary + :not( b- ) + b- { color: blue; }
      b-.ordinary + :not( b- ) + :not( b- ) + b- { color: blue; }
      b-.ordinary + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: blue; }
      b-.ordinary + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: blue; }
      b-.ordinary + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: blue; }

      .surprise ~next-of-type { color: orange; }
      a-.surprise + a- { color: orange; }
      a-.surprise + :not( a- ) + a- { color: orange; }
      a-.surprise + :not( a- ) + :not( a- ) + a- { color: orange; }
      a-.surprise + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: orange; }
      a-.surprise + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: orange; }
      a-.surprise + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + :not( a- ) + a- { color: orange; }
      b-.surprise + b- { color: orange; }
      b-.surprise + :not( b- ) + b- { color: orange; }
      b-.surprise + :not( b- ) + :not( b- ) + b- { color: orange; }
      b-.surprise + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: orange; }
      b-.surprise + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: orange; }
      b-.surprise + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + :not( b- ) + b- { color: orange; }
    <h1>next-of-type synthesized</h1>
    <div class=container>
     <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>

Thanks to BoltClock for saying it wasn't possible, and other helpful comments that led me to this solution.

2
  • Unfortunately, this workaround isn't practical for my use case, which has 45 different types of elements, and particular pairs of element types might have up to 120 elements of other types between them. So it would take 5400 selector combinations, most of which would be extremely lengthy, to use this technique as a workaround.
    – Victoria
    Feb 28, 2019 at 9:48
  • Breaking down the feature, I guess the combinator feature would be "first that matches"... the current combinators are + "first if matches", and ~ "all that match". With "first that matches", the above solution could be reduced to one line per type of element of interest... for the last example in the set that would be a-.ordinary (new-combinator) a- {color: blue;] b-.ordinary (new-combinator) b- {color: blue;}
    – Victoria
    Mar 1, 2019 at 19:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.