Structural selectors in CSS

Selecting by position: every other row, the first few, the last one.

tbody tr:nth-child(2n) {
  background: rgb(255 255 255 / 3%);
}

.steps li:nth-child(-n + 3) {
  font-weight: 600;
}

.chips > *:last-child {
  margin-inline-end: 0;
}

p:first-of-type::first-line {
  letter-spacing: 0.04em;
}

How it works

1. nth-child(2n) is every second child.
2. nth-child(-n + 3) takes the first three.
3. nth-of-type counts only siblings of the same element.

Keywords and builtins used here

• background
• chips
• em
• rgb
• steps

The run, in numbers

Lines

15

Characters to type

218

Tokens

61

Three-star pace

70 tpm

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

Type this snippet

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

← Previous Next →