Support for Adjacent Sibling Selector

[akaSybe]

There is support for General Sibling Selector (div ~ div) using peer modifier – https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-sibling-state

I would like to have support for Adjacent Sibling Selector (div + div): https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator

Didn't find any issues about that...

I made playground to highlight difference between these two selectors: https://play.tailwindcss.com/JA6kgy1ie9?file=css

[adamwathan]

Can you share an example of where you'd find specific support for it useful? You can always put the peer class on the adjacent sibling 👍

You can also use arbitrary variants, like [:hover_+_&]:underline which would add an underline when the adjacent sibling is hovered.

[akaSybe]

Sorry for delay

I've done an example: https://play.tailwindcss.com/GGBwlFUjz9

There is a list of selectable items, there are dividers between items, you can click on item and it becomes selected – in playground this behavior implemented via checkboxes

Selected item should have rounded border and divider between selected item and next item should be hidden – that's where I wanted to use adjacent sibling selector – check CSS tab and class .next_sibling

In real world app (React) list item is going to be present as component, something like this:

const ListItem = () => (
  <div class="next_sibling border border-transparent border-t-black first:border-t-transparent [&:has(input:checked)]:rounded-xl [&:has(input:checked)]:border-red-300">
    <input type="checkbox" class="hidden" id="react" />
    <label for="react" class="block p-4">React</label>
  </div>
)

and List becomes:

const List = () => {
  const items = ['React', 'Angular', 'Vue', 'Svelte'];
  
  return (
    <div class="flex flex-col p-10">
      {items.map(item => <ListItem value={item} ... />)}
    </div>
  )
}

You suggested two solutions: 1) using conditional 'peer' class 2) using arbitrary variants

The first one is require you to make javascript calculation (in List component) to know when to apply class by condition and pass additional prop (or className) to ListItem – looks weird for me, I wouldn't like to do it at all if I can solve my task using pure CSS

The second one breaks component isolation – now List component should know internal details of ListItem – class or tag to use in selector in arbitrary variants

---

I believe there are a lots of examples where Adjacent Sibling selector would be helpful

[Crustan]

Totally agree! Did you ever found a solution for this?

[akaSybe]

I had to use custom css-class in project where this was needed