CSS selectors

In vanilla CSS, it's not possible to select a different element via the class or style attribute. You can't class=":hover…" or style="::before…", let alone class=">li:first-child…" or style="body:has(&[open]) & + & li:first-child…".

Bring in some additional tooling —for example Tailwind CSS, Windi CSS, or in this case UnoCSS— and you can do any of that.

TIP

As always with unocss-preset-css, the ruleset can have more than one rule (docs: CSS rulesets > Multiple CSS declarations) and/or block at-rules (docs: CSS block at-rules) and/or customized selectors. For the sake of legibility, the examples on this page use single-rule rulesets with no at-rules.

👀 You can experiment with all of these examples in this UnoCSS Play.

Pseudoselectors

To select an element's pseudoselectors, write your CSS ruleset in the class attribute prefixed with the pseudoselector:

class="<pseudoselector>{<property>:<value>}"

Input

<button class=":focus{color:red}">
  This button is not clickable. When focused, its text is red.
</button>

Output

• Front end

• CSS

  .\:focus\{color\:red\} {
    &:focus {
      color: red;
    }
  }

Pseudoelements

To select an element's pseudoelements, write your CSS ruleset in the class attribute prefixed with the pseudoelement selector:

class="<pseudoelement selector>{<property>:<value>}"

Input

<div class="::before{content:\27aa}">
  This is prefixed with a left-shaded white rightwards arrow
</div>

Output

• Front end

  This is prefixed with a left-shaded white rightwards arrow

• CSS

  .\:\:before\{content\:\\27aa\} {
    &::before {
      content: "\27aa";
    }
  }

Arbitrary selectors

To select other elements, write your CSS ruleset in the class attribute prefixed with the selector in square brackets:

class="[<selector>]{<property>:<value>}"

WARNING

• Use underscores instead of spaces.
• If you want a literal underscore, escape it with a backslash (\).

This opens countless doors (or at least a very large countable number. If you're a mathematician, let me know which is right).

• You can select an element's children:

  Input

  <ul class="[&>li:nth-child(even)]{color:red}">
    <li>This is black.</li>
    <li>This is red.</li>
    <li>This is black.</li>
    <li>This is red.</li>
  </ul>

  Output

  • Front end

    • This is black.
    • This is red.
    • This is black.
    • This is red.

  • CSS

    .\[\&\>li\:nth-child\(even\)\]\{color\:red\} {
      &>li:nth-child(even) {
        color: red;
      }
    }

• You can select attribute states:

  Input

  <details>
    <summary class="[[open]>&]{color:red}">
      Red when open
    </summary>
  
    Details
  </details>

  Output

  • Front end

    Red when open

    Details
    

  • CSS

    .\[\[open\]\>\&\]\{color\:red\} {
      [open]>& {
        color: red;
      }
    }

• You can select fully independent elements

  Input

  <div id="an-arbitrary-element">
    This is black. <span>This is red.</span>
  </div>
  
  <div class="[#an-arbitrary-element_span]{color:red}"></div>

  Output

  • Front end

    This is black. This is red.

  • CSS

    #an-arbitrary-element span {
      color: red;
    }