Combinators in CSS

Descendant, child, adjacent and general sibling: four ways to relate elements.

nav a {
  text-decoration: none;
}

.menu > li {
  list-style: none;
}

h2 + p {
  margin-top: 0;
}

p ~ p {
  margin-top: 0.75rem;
}

How it works

1. A space means any descendant, > only a direct child.
2. + is the next sibling, ~ any later sibling.
3. Sibling combinators are how you space stacked content.

Keywords and builtins used here

• menu
• rem

The run, in numbers

Lines

15

Characters to type

125

Tokens

37

Three-star pace

70 tpm

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

Type this snippet

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

← Previous Next →