Pseudo-classes in CSS

State selectors: hover, focus, disabled, and the structural ones.

.button:hover {
  background: #2a2f3a;
}

.button:focus-visible {
  outline: 2px solid #7c5cff;
  outline-offset: 2px;
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.step:not(:last-child) {
  border-bottom: 1px solid #222;
}

How it works

1. :focus-visible shows a ring for keyboard users only.
2. :is() groups selectors without raising specificity.
3. :not() excludes, and :first-child counts position.

Keywords and builtins used here

• background
• button
• cursor
• opacity
• outline
• px
• step

The run, in numbers

Lines

17

Characters to type

230

Tokens

59

Three-star pace

70 tpm

At the three-star pace of 70 tokens a minute, this run takes about 51 seconds.

Type this snippet

Step 5 of 6 in Selectors, step 5 of 26 in Selectors & the box model.

← Previous Next →