# 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
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://bryan-guner.gitbook.io/my-docs/redux/repos/examples/real-world/node_modules/css-has-pseudo.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.