the-forest/client/node_modules/css-has-pseudo/README.md
2024-09-17 20:35:18 -04:00

106 lines
2.9 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# CSS Has Pseudo [<img src="http://jonathantneal.github.io/js-logo.svg" alt="" width="90" height="90" align="right">][CSS Has Pseudo]
[![NPM Version][npm-img]][npm-url]
[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
[CSS Has Pseudo] lets you style elements relative to other elements in CSS,
following the [Selectors Level 4] specification.
[!['Can I use' table](https://caniuse.bitsofco.de/image/css-has.png)](https://caniuse.com/#feat=css-has)
```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 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:
```bash
npx css-has-pseudo SOURCE.css --output TRANSFORMED.css
```
Next, use your transformed CSS with this script:
```html
<link rel="stylesheet" href="TRANSFORMED.css">
<script src="https://unpkg.com/css-has-pseudo/dist/browser-global.js"></script>
<script>cssHasPseudo(document)</script>
```
⚠️ 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.
Thats 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](README-BROWSER.md) for more information.
## How it works
The [PostCSS plugin](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](README-BROWSER.md) adds a `[:has]` attribute to
elements otherwise matching `:has` natively.
```html
<body :has(:focus)>
<input value="This element is focused">
</body>
```
[discord]: https://discord.gg/bUadyRwkJS
[npm-img]: https://img.shields.io/npm/v/css-has-pseudo.svg
[npm-url]: https://www.npmjs.com/package/css-has-pseudo
[CSS Has Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo
[Mutation Observer polyfill]: https://github.com/webmodules/mutation-observer
[Selectors Level 4]: https://drafts.csswg.org/selectors-4/#has-pseudo