Style elements relative to other elements
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.editorconfig
.gitignore
.rollup.js
.tape.js
.travis.yml
CHANGELOG.md
CONTRIBUTING.md
INSTALL-POSTCSS.md
LICENSE.md
README-BROWSER.md
README-POSTCSS.md
README.md
package.json

README.md

CSS Has Pseudo

NPM Version Build Status Support Chat

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>