CSS Has Pseudo

CSS Has Pseudo lets you style elements relative to other elements in CSS, following the Selectors Level 4 specification.

```css 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:

bash npx css-has-pseudo SOURCE.css --output TRANSFORMED.css

Next, use your transformed CSS with this script:

```html

```

⚠️ Please use a versioned url, like this : https://unpkg.com/css-has-pseudo@3.0.0/dist/browser-global.js Without the version, you might unexpectedly get a new major version of the library with breaking changes.

⚠️ If you were using an older version via a CDN, please update the entire url. The old URL will no longer work in a future release.

That’s it. The script is 765 bytes and works in most browser versions, including Internet Explorer 11. With a Mutation Observer polyfill, the script will work down to Internet Explorer 9.

See README BROWSER for more information.

How it works

The PostCSS plugin clones rules containing :has, replacing them with an alternative [:has] selector.

```css 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.

```html

```