css-has-pseudo

    2.0.0 • Public • Published

    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.

    'Can I use' table

    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>

    Install

    npm i css-has-pseudo

    DownloadsWeekly Downloads

    4,644,453

    Version

    2.0.0

    License

    CC0-1.0

    Unpacked Size

    58.9 kB

    Total Files

    13

    Last publish

    Collaborators

    • jonathantneal