[csswg-drafts] [selectors] Next of type selector (#13714)

joezappie has just created a new issue for https://github.com/w3c/csswg-drafts:

== [selectors] Next of type selector ==
### Problem Background
I have a css divider library that uses `:has(+ &)` and `+` to select the previous and next elements and apply masks, paddings and margins on them which makes it super easy to make dividers and ensures content doesn't get clipped.

```html
<section class='divider-show bg-blue-500'></div>
<div class='divider divider-20 divider-triangle-down'></div>
<section class='divider-show bg-red-500'></div>
```

This works great as the divider element can pass the size to the previous and next element, and the mask-image to the next element. Here is a fun little example: 

https://jsfiddle.net/zd7qah8m/

The problem I run into, is sometimes other things out of my control will inject elements in between these elements and then it all falls apart. I'm mainly concerned about non visual elements like <script> and <style>. I was surprised when I found out CSS next selector finds these even thought they're invisible non-rendered elements.

```html
<section class='divider-show bg-blue-500'></div>
<div class='divider divider-20 divider-triangle-down'></div>
<script></script> <!-- Uhoh -->
<section class='divider-show bg-red-500'></div>
```

### Current Solution
It gets really complicated to then try to forward these values past these elements and the only thing I can think of is to manually check for specifically style or script tags of a known quantity:
```css
+ :is(script, style) + *,
+ :is(script, style) + :is(script, style) + *,
+ :is(script, style) + :is(script, style) + :is(script, style) + * {
```

### What we need
It would be nice if CSS either had:

- Next of type selector
- Or at least the ability to skip over these non visual/rendered elements

Ideally, I think the next of type would be the most useful. Since its a combination of next (+) and subsequent (~) , maybe the `+~` operator would be logical. 

For example, this would find the next same level element with .divider show
```css
.divider-20 {
  +~ .divider-show {
     --divider-top-size: 100px;
  }
}
```

```html
<section class='divider-show bg-blue-500'></div>
<div class='divider divider-20 divider-triangle-down'></div> <!-- This element targets next divider-show class -->
<script></script>
<style></style>
<dialog></dialog>
<section class='divider-show bg-red-500'></div> <!-- Finds this element as its the next with divider-show class --> 
```

TLDR: We need a subsequent operator that finds just the next one, not all proceeding siblings.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13714 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 24 March 2026 20:52:30 UTC