Apply styles to sibling

[t-monaco]

Hi,

Maybe this is a silly question but I couldn't find a solution in the docs.

How I can target a sibling when the other is focused? In normal CSS I used the "+" selector.

This is an example:

export const Sibling1 = style({
    // some styles
});

export const Sibling2 = style({
    // some styles

    selectors: {
        [`&:focus+${Sibling1} &`]: {
            // more styles
        },
    },
});

I'll provide some layout for context:

<div className="parent">
     <div className={`${Sibling1}`}>
         // code...
     </div>
     <div className={`${Sibling2}`}>
         // code...
     </div>
</div>

How I can achieve this? I mean, how can I target sibling1 from sibling2?

Thanks in advance.

[askoufis]

The + combinator only targets the next sibling. You can't target a previous sibling with it. Targeting a previous sibling can be done with :has though. You do have to make sure that your style specifically targets the element it is applied to (this is an intentional constraint of Vanilla Extract), but this works:

import { style } from "@vanilla-extract/css";

export const sibling1 = style({
  color: 'red',

  get selectors() {
    return {
      [`&:has(+ ${sibling2}:hover)`]: {
        color: "blue",
      },
    };
  },
});

export const sibling2 = style({});

This leverages circular selectors so that you can reference sibling2 within sibling1, before sibling2 is defined.