katoikia-app/web-ui/web-react/node_modules/css-has-pseudo
Maria Sanchez 5abf040b42 fix web ui template 2022-07-05 22:15:11 -06:00
..
node_modules fix web ui template 2022-07-05 22:15:11 -06:00
CHANGELOG.md fix web ui template 2022-07-05 22:15:11 -06:00
LICENSE.md fix web ui template 2022-07-05 22:15:11 -06:00
README.md fix web ui template 2022-07-05 22:15:11 -06:00
browser.js fix web ui template 2022-07-05 22:15:11 -06:00
cli.js fix web ui template 2022-07-05 22:15:11 -06:00
index.js fix web ui template 2022-07-05 22:15:11 -06:00
index.js.map fix web ui template 2022-07-05 22:15:11 -06:00
index.mjs fix web ui template 2022-07-05 22:15:11 -06:00
index.mjs.map fix web ui template 2022-07-05 22:15:11 -06:00
package.json fix web ui template 2022-07-05 22:15:11 -06:00
postcss.js fix web ui template 2022-07-05 22:15:11 -06:00
postcss.js.map fix web ui template 2022-07-05 22:15:11 -06:00
postcss.mjs fix web ui template 2022-07-05 22:15:11 -06:00
postcss.mjs.map fix web ui template 2022-07-05 22:15:11 -06:00

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 dont 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>

Thats 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>