> For the complete documentation index, see [llms.txt](https://bryan-guner.gitbook.io/my-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bryan-guner.gitbook.io/my-docs/redux/repos/examples/real-world/node_modules/css-has-pseudo.md).
# CSS Has Pseudo
[](https://www.npmjs.com/package/css-has-pseudo) [](https://travis-ci.org/csstools/css-has-pseudo) [](https://gitter.im/postcss/postcss)
[CSS Has Pseudo](https://github.com/csstools/css-has-pseudo) lets you style elements relative to other elements in CSS, following the [Selectors Level 4](https://drafts.csswg.org/selectors-4/#has-pseudo) 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 TRANSFORMED.css
```
Next, use your transformed CSS with this script:
```html
```
That’s it. The script is 765 bytes and works in all browsers, including Internet Explorer 11. With a [Mutation Observer polyfill](https://github.com/webmodules/mutation-observer), the script will work down to Internet Explorer 9.
## How it works
The [PostCSS plugin](https://github.com/bgoonz/Learning-Redux/blob/master/repos/examples/real-world/node_modules/css-has-pseudo/README-POSTCSS.md) 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](https://github.com/bgoonz/Learning-Redux/blob/master/repos/examples/real-world/node_modules/css-has-pseudo/README-BROWSER.md) adds a `[:has]` attribute to elements otherwise matching `:has` natively.
```html
```