Overview

Every utility in a typescriptcss chain can be applied conditionally by inserting a state segment before it. To change the background on hover, write hover and then the utilities that should apply while the pointer is over the element.

Everything before hover is the resting style, and everything after it applies only while the condition holds. A state segment reads exactly like a breakpoint segment, so once you know one you know them all. The resting and active styles sit side by side in the same expression, which means you can see both at a glance and never hunt through a stylesheet to find where a hover style was defined.

State segments can also be stacked to target a precise situation — a different background in dark mode, at the medium breakpoint, on hover:

This guide walks through every state available: pseudo-classes, structural and form states, parent and sibling states, negation, and pseudo-elements.

Pseudo-classes

hover, focus, and active

Style elements as the user interacts with them using hover, focus, and active. Stack them in one chain to describe all three at once.

visited, focusWithin, and focusVisible are available too, which is what you reach for when refining keyboard navigation and link styling.

first, last, odd, and even

Style an element by its position among its siblings. Use first and last to trim the ends of a list, and odd and even for zebra striping — the browser decides which is which, so the markup is identical for every row.

For finer control, nth targets children by position, so you can style every third item or any pattern you need without computing the index yourself.

required, invalid, disabled, and checked

Form controls expose their own states. React to what a field is doing with required, invalid, disabled, checked, and readOnly instead of branching in your component.

The same chain covers every state the input can be in, which removes a whole layer of conditional class logic from your templates.

has

Style an element from the state or content of its descendants with has. A label can highlight itself when the radio inside it is checked:

has reacts to descendants of any depth, so a container can respond to a control buried several levels inside it.

Styling based on parent state

Mark a parent with group and read its state from a child with a group segment. Hovering the card changes the nested text even though the pointer is over the parent.

This works with every pseudo-class — group.focus, group.active, and the rest — so an entire card or row can coordinate its interactive styling from one parent. When you nest groups, name them with group['item'] and read a specific one with group['item'].hover so the right ancestor drives the style.

Styling based on sibling state

Mark a sibling with peer and react to it from a later element using a peer segment. A checkbox can strike through its own label and hide the adjacent delete button when checked:

peer and peerHas cover the cases where the element you want to style comes after the one whose state matters.

Negation

Use not to apply utilities only when a condition is false. It is most useful combined with another state — for example, applying a hover style only while the element is not focused:

Pseudo-elements

Reach the generated pieces of an element with before, after, placeholder, and selection.

before and after let you add decorative content, placeholder styles the hint text of an input, and selection styles highlighted text — all without a separate rule.

State reference

Every segment in the table reads the same way and stacks with breakpoints and dark, so you compose them freely without learning a separate syntax for each combination.