typestar

Nesting in CSS

The child rules live inside the parent, which is how you read the component in one place.

.card {
  padding: 1rem;
  border-radius: 0.5rem;

  & h3 {
    margin: 0;
    font-size: 1.125rem;
  }

  &:hover { background: #f8fafc; }

  &.is-selected { outline: 2px solid #2b6cb0; }

  @media (width >= 48rem) {
    padding: 1.5rem;
  }
}

How it works

  1. & is the parent selector; it is required when the nested rule starts with a name.
  2. A nested selector's specificity is that of the whole chain, as if written out.
  3. Nest one level where you can: three levels is a selector nobody can find.

Keywords and builtins used here

The run, in numbers

Lines
17
Characters to type
216
Tokens
65
Three-star pace
85 tpm

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

Type this snippet

Step 3 of 3 in Selectors that ask questions, step 10 of 21 in Responsive & modern CSS.

← Previous Next →

Nesting in other languages