Pseudo Variants

Pseudo Interactions

Pseudos allow for utility properties to be conditionally applied based on user interaction. These include interactions such as hover, focus, and etc.

Pseudo Interactions

Pseudo interactions such as hover can be achieved by appending the pseudo variant to the beginning of your class name e.g. <pseudo>.<property-variant>.

<button class="bg-blue-500 hover.bg-blue-600 ...">Hover on me</button>

Pseudo Variant Chart

The following pseudo interactions are available to be activated for each property.

Enabling Pseudos

By default, only a subset of properties have pseudo variants enabled. To see which pseudos are enabled for each property, refer to the API Reference. You can enable pseudo variants by passing the variant names to the pseudos setting of each property.

@use "uniform" as * with (
  $config: (
    utilities: (
      background-color: (
      	pseudos: (hover, active, focus, group-hover)
      ),
      border-color: (
      	pseudos: (focus-within)
      ),
      color: (
        pseudos: (focus)
      ),
    )
  )
);

Pseudo Delimiter

By default, Uniform uses the . character to separate pseudos from the property. You can override the default breakpoint delimiter by defining the pseudo-delimiter setting in your configuration.

// main.scss
@use "uniform" as * with (
  $config: (
    pseudo-delimiter: '--',
  )
);

/* main.css */
.hover--bg-red-500:hover { ... }
...

Extending Pseudos

You can extend the available set of pseudos by passing in key value pairs to the pseudos key in your configuration variable.

@use "uniform" as * with (
  $config: (
    pseudos: (
      nth4: ':nth-child(4)',
      nth5n: ':nth-child(5n)',
    ),
    utilities: (
      background-color: (
        pseudos: (nth4, nth5n)
      )
    )
  )
);

/* main.css */
.nth4\.block:nth-child(4),
.nth5n\.block:nth-child(5n) { 
  display: block;
}

Group Hover

The group-hover.<property> is a unique hover pseudo property that allows you to apply properties when the parent container is hovered. You must assign the parent container with a group class.

<a class="group hover.bg-black">
  <h3 class="color-black group-hover.color-mint bold">Group Hover</h3>
  <p class="color-black group-hover.color-white">Hover on this card to see change</p>
</a>

Group Focus

The group-focus.<property> functions in a similar way to group-hover but allows you to apply properties when the parent container is in focus. You must assign the parent container with a group class.

<button class="group bg-white focus.bg-black ...">
  <h3 class="color-black group-focus.color-mint bold">Group Focus</h3>
  <p class="color-black group-focus.color-white">Focus on this card to see change</p>
</button>