Apply style to Child if parent has class

[t-monaco]

Hi everyone,

Sorry if this is a silly question but I was using styled-components and now I have switched to vanilla-extract due to the zero runtime.

How I can apply styles to the Child component only if the Parent has a specific class?

This is my code:

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

export const Parent = style({
    // Parent styles...
)}

export const Child = style({
    // Child styles...

    selectors: {
        [`${Parent}:has(open) &`]: {
            // styles that apply to Child, ONLY if Parent has the "open" class.
        }
    }
})

Thanks in advance!

---

Relevant package versions:

• "@vanilla-extract/css": "^1.13.0"
• "react": "^18.2.0"
• "typescript": "^5.0.2"
• "vite": "^4.4.5"

[mihkeleidast]

You are probably looking for the :is() pseudo-selector instead of :has(): https://developer.mozilla.org/en-US/docs/Web/CSS/:is

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

export const Parent = style({
    // Parent styles...
})

export const Child = style({
    // Child styles...

    selectors: {
        [`${Parent}:is(.open) &`]: {
            // styles that apply to Child, ONLY if Parent has the "open" class.
        }
    }
})

It should also work without the pseudo selector actually:

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

export const Parent = style({
    // Parent styles...
})

export const Child = style({
    // Child styles...

    selectors: {
        [`${Parent}.open &`]: {
            // styles that apply to Child, ONLY if Parent has the "open" class.
        }
    }
})

If the open class is also defined in vanilla-extract:

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

export const Parent = style({
    // Parent styles...
})

export const open = style({})

export const Child = style({
    // Child styles...

    selectors: {
        [`${Parent}${open} &`]: {
            // styles that apply to Child, ONLY if Parent has the "open" class.
        }
    }
})

[t-monaco]

Cool thanks!!