| 1 | # CSS Has Pseudo [<img src="http://jonathantneal.github.io/js-logo.svg" alt="" width="90" height="90" align="right">][CSS Has Pseudo]
|
|---|
| 2 |
|
|---|
| 3 | [![NPM Version][npm-img]][npm-url]
|
|---|
| 4 | [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
|
|---|
| 5 |
|
|---|
| 6 | [CSS Has Pseudo] lets you style elements relative to other elements in CSS,
|
|---|
| 7 | following the [Selectors Level 4] specification.
|
|---|
| 8 |
|
|---|
| 9 | [](https://caniuse.com/#feat=css-has)
|
|---|
| 10 |
|
|---|
| 11 | ```css
|
|---|
| 12 | a:has(> img) {
|
|---|
| 13 | /* style links that contain an image */
|
|---|
| 14 | }
|
|---|
| 15 |
|
|---|
| 16 | h1:has(+ p) {
|
|---|
| 17 | /* style level 1 headings that are followed by a paragraph */
|
|---|
| 18 | }
|
|---|
| 19 |
|
|---|
| 20 | section:not(:has(h1, h2, h3, h4, h5, h6)) {
|
|---|
| 21 | /* style sections that don’t contain any heading elements */
|
|---|
| 22 | }
|
|---|
| 23 |
|
|---|
| 24 | body:has(:focus) {
|
|---|
| 25 | /* style the body if it contains a focused element */
|
|---|
| 26 | }
|
|---|
| 27 | ```
|
|---|
| 28 |
|
|---|
| 29 | ## Usage
|
|---|
| 30 |
|
|---|
| 31 | From the command line, transform CSS files that use `:has` selectors:
|
|---|
| 32 |
|
|---|
| 33 | ```bash
|
|---|
| 34 | npx css-has-pseudo SOURCE.css --output TRANSFORMED.css
|
|---|
| 35 | ```
|
|---|
| 36 |
|
|---|
| 37 | Next, use your transformed CSS with this script:
|
|---|
| 38 |
|
|---|
| 39 | ```html
|
|---|
| 40 | <link rel="stylesheet" href="TRANSFORMED.css">
|
|---|
| 41 | <script src="https://unpkg.com/css-has-pseudo/dist/browser-global.js"></script>
|
|---|
| 42 | <script>cssHasPseudo(document)</script>
|
|---|
| 43 | ```
|
|---|
| 44 |
|
|---|
| 45 | ⚠️ Please use a versioned url, like this : `https://unpkg.com/css-has-pseudo@3.0.0/dist/browser-global.js`
|
|---|
| 46 | Without the version, you might unexpectedly get a new major version of the library with breaking changes.
|
|---|
| 47 |
|
|---|
| 48 | ⚠️ If you were using an older version via a CDN, please update the entire url.
|
|---|
| 49 | The old URL will no longer work in a future release.
|
|---|
| 50 |
|
|---|
| 51 | That’s it. The script is 765 bytes and works in most browser versions, including
|
|---|
| 52 | Internet Explorer 11. With a [Mutation Observer polyfill], the script will work
|
|---|
| 53 | down to Internet Explorer 9.
|
|---|
| 54 |
|
|---|
| 55 | See [README BROWSER](README-BROWSER.md) for more information.
|
|---|
| 56 |
|
|---|
| 57 | ## How it works
|
|---|
| 58 |
|
|---|
| 59 | The [PostCSS plugin](README-POSTCSS.md) clones rules containing `:has`,
|
|---|
| 60 | replacing them with an alternative `[:has]` selector.
|
|---|
| 61 |
|
|---|
| 62 | ```css
|
|---|
| 63 | body:has(:focus) {
|
|---|
| 64 | background-color: yellow;
|
|---|
| 65 | }
|
|---|
| 66 |
|
|---|
| 67 | section:not(:has(h1, h2, h3, h4, h5, h6)) {
|
|---|
| 68 | background-color: gray;
|
|---|
| 69 | }
|
|---|
| 70 |
|
|---|
| 71 | /* becomes */
|
|---|
| 72 |
|
|---|
| 73 | body[\:has\(\:focus\)] {
|
|---|
| 74 | background-color: yellow;
|
|---|
| 75 | }
|
|---|
| 76 |
|
|---|
| 77 | body:has(:focus) {
|
|---|
| 78 | background-color: yellow;
|
|---|
| 79 | }
|
|---|
| 80 |
|
|---|
| 81 | section[\:not-has\(h1\,\%20h2\,\%20h3\,\%20h4\,\%20h5\,\%20h6\)] {
|
|---|
| 82 | background-color: gray;
|
|---|
| 83 | }
|
|---|
| 84 |
|
|---|
| 85 | section:not(:has(h1, h2, h3, h4, h5, h6)) {
|
|---|
| 86 | background-color: gray;
|
|---|
| 87 | }
|
|---|
| 88 | ```
|
|---|
| 89 |
|
|---|
| 90 | Next, the [JavaScript library](README-BROWSER.md) adds a `[:has]` attribute to
|
|---|
| 91 | elements otherwise matching `:has` natively.
|
|---|
| 92 |
|
|---|
| 93 | ```html
|
|---|
| 94 | <body :has(:focus)>
|
|---|
| 95 | <input value="This element is focused">
|
|---|
| 96 | </body>
|
|---|
| 97 | ```
|
|---|
| 98 |
|
|---|
| 99 | [discord]: https://discord.gg/bUadyRwkJS
|
|---|
| 100 | [npm-img]: https://img.shields.io/npm/v/css-has-pseudo.svg
|
|---|
| 101 | [npm-url]: https://www.npmjs.com/package/css-has-pseudo
|
|---|
| 102 |
|
|---|
| 103 | [CSS Has Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo
|
|---|
| 104 | [Mutation Observer polyfill]: https://github.com/webmodules/mutation-observer
|
|---|
| 105 | [Selectors Level 4]: https://drafts.csswg.org/selectors-4/#has-pseudo
|
|---|
