:has selector Selector selects all elements with class .outer which contains an element with the class .inner and applies red background.
function Component() {
return (
<div
css={css`
* {
border: 2px solid grey;
padding: 20px;
}
.inner {
background-color: white;
}
.outer:has(.inner) {
background-color: red;
}
`}
>
<div
className='outer'
// css={{ border: '1px solid grey', padding: '20px' }}
>
Outer element
<div
className='inner'
// css={{ border: '1px solid grey', padding: '20px' }}
>
Inner element
</div>
</div>
</div>
)
}
Pass multiple selectors
.heading:has(> .subtitle strong#accent) { }
Selects any .heading element that has a direct child with the class .subtitle which contains a strong element in it with the id accent . Another example
.heading:has(.subtitle) p { }
Selects any p tag that is inside a .heading element as long as that .heading element contains a .subtitle element Multiple has selectors
.heading:has(.subtitle, p) { }
Select a .heading that has either an element with the class of .subtitle inside it or a p element inside it
.heading:has(.subtitle):has(p) { }
Only select a .heading that has both a .subtitle and p element inside it