2.5 KiB
2.5 KiB
CSS Has Pseudo 
CSS Has Pseudo lets you style elements relative to other elements in CSS, following the Selectors Level 4 specification.
a:has(> img) {
/* style links that contain an image */
}
h1:has(+ p) {
/* style level 1 headings that are followed by a paragraph */
}
section:not(:has(h1, h2, h3, h4, h5, h6)) {
/* style sections that don’t contain any heading elements */
}
body:has(:focus) {
/* style the body if it contains a focused element */
}
Usage
From the command line, transform CSS files that use :has selectors:
npx css-has-pseudo SOURCE.css TRANSFORMED.css
Next, use your transformed CSS with this script:
<link rel="stylesheet" href="TRANSFORMED.css">
<script src="https://unpkg.com/css-has-pseudo/browser"></script>
<script>cssHasPseudo(document)</script>
That’s it. The script is 765 bytes and works in all browsers, including Internet Explorer 11. With a Mutation Observer polyfill, the script will work down to Internet Explorer 9.
How it works
The PostCSS plugin clones rules containing :has,
replacing them with an alternative [:has] selector.
body:has(:focus) {
background-color: yellow;
}
section:not(:has(h1, h2, h3, h4, h5, h6)) {
background-color: gray;
}
/* becomes */
body[\:has\(\:focus\)] {
background-color: yellow;
}
body:has(:focus) {
background-color: yellow;
}
section[\:not-has\(h1\,\%20h2\,\%20h3\,\%20h4\,\%20h5\,\%20h6\)] {
background-color: gray;
}
section:not(:has(h1, h2, h3, h4, h5, h6)) {
background-color: gray;
}
Next, the JavaScript library adds a [:has] attribute to
elements otherwise matching :has natively.
<body :has(:focus)>
<input value="This element is focused">
</body>