CSS Nesting and Logical Properties

Write nested CSS without a preprocessor using the & selector, and use logical properties like margin-inline and padding-block that work in every writing direction.

Lesson 42 of 49Intermediate15 min read

Two newer CSS features change how everyday stylesheets look. The first is native nesting. For years, developers used preprocessors such as Sass just to write rules inside other rules, keeping a component's styles together. Now browsers understand nesting directly, so you can write .card { & h3 { ... } } in plain CSS with no build step.

The second is logical properties. Properties like margin-left and padding-top are tied to physical directions. But in Arabic and Hebrew, text runs right to left, and in some Japanese and Chinese layouts it runs top to bottom. Logical properties such as margin-inline-start and padding-block describe directions relative to the text instead, so one stylesheet works in every language.

In this lesson you'll learn how nesting works, the role of the & symbol, nesting media queries inside rules, and how nesting affects specificity. Then you'll meet the logical property names and shorthands such as margin-inline: auto and inset: 0, which are worth using even on English-only sites because they're shorter.

Native CSS nesting

CSS
.card {
  padding: 16px;

  & h3 { margin: 0; }          /* .card h3 */
  &:hover { background: #f9fafb; }  /* .card:hover */
  &.featured { border-color: gold; } /* .card.featured */
  .dark & { background: #111; } /* .dark .card */
}
  • & stands for the parent selector. & h3 means "an h3 inside .card", and &:hover means ".card when hovered".
  • Without a space, &.featured joins the selectors: the card that also has the featured class.
  • Putting & at the end, as in .dark &, matches the card inside a .dark ancestor.
  • For a nested descendant you can leave out & and just write h3 { ... }; all modern browsers support it.

Nesting media and container queries

Nesting really pays off with at-rules. The responsive behaviour lives next to the styles it changes:

CSS
.grid {
  display: grid;
  gap: 12px;

  @media (min-width: 700px) {
    grid-template-columns: 1fr 1fr;
  }
}

Inside a nested @media, declarations apply to the parent selector, so you don't repeat .grid. The same works for @container and @supports.

Nesting and specificity

A nested selector is treated like :is() around the parent. .card { & h3 {} } has the same specificity as .card h3. If the parent is a list, such as #main, .side { & a {} }, the parent part takes the highest specificity in that list, which can surprise you.

Keep nesting shallow: two or three levels at most. Deep nesting creates long, highly specific selectors that are hard to override, the same problem Sass users learned to avoid.

Logical properties

PhysicalLogicalIn English (left to right, top to bottom)
margin-left / margin-rightmargin-inline-start / margin-inline-endleft / right
margin-left + margin-rightmargin-inlineboth sides
padding-top + padding-bottompadding-blocktop and bottom
width / heightinline-size / block-sizewidth / height
top, right, bottom, leftinset-block-start, inset-inline-end...positions
border-leftborder-inline-startleft border
text-align: lefttext-align: startleft

Inline is the direction text flows along a line; block is the direction lines stack. In a right-to-left language, margin-inline-start becomes the right margin automatically.

CSS Nesting Syntax

Nesting and logical properties

.button {
  padding-block: 10px;
  padding-inline: 18px;
  &:hover { filter: brightness(1.1); }
  & .icon { margin-inline-end: 6px; }
  @media (min-width: 600px) { padding-inline: 24px; }
}
.wrap { max-inline-size: 70ch; margin-inline: auto; }
.overlay { position: absolute; inset: 0; }

CSS Nesting Summary

  • Native CSS nesting lets you write rules inside rules, with no preprocessor.
  • & represents the parent selector; &:hover and &.class join to it.
  • Media and container queries can be nested inside a rule.
  • Keep nesting shallow to avoid overly specific selectors.
  • Logical properties like margin-inline and padding-block adapt to the writing direction.

CSS Nesting Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

A nested card component

.card {
  max-inline-size: 320px;
  padding: 16px;
  margin-block-end: 12px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-family: sans-serif;

  & h3 { margin: 0 0 6px; }
  & p { margin: 0 0 10px; color: #475569; }
  & a { color: #2563eb; font-weight: 600; }

  &:hover { border-color: #94a3b8; }
  &.featured { border-color: #f59e0b; background: #fffbeb; }
}
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 2 to 4Logical size and margin properties.
  2. Lines 9 to 11Child styles live inside the component.
  3. Line 13&:hover means .card:hover.
  4. Line 14&.featured means a card that also has the featured class.
Example 2

Nested media queries

Drag the panel wider than 600px.

.features {
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
  font: 600 15px sans-serif;

  & li {
    padding-block: 14px;
    padding-inline: 16px;
    background: #ecfeff;
    border-inline-start: 4px solid #0891b2;
  }

  @media (min-width: 600px) {
    grid-template-columns: repeat(3, 1fr);
  }
}
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 8 to 13Each item gets padding and an accent border on its starting edge.
  2. Lines 15 to 17The media query sits inside the rule, so it applies to .features without repeating it.
Example 3

Logical properties in right-to-left text

The same CSS in an English and an Arabic block. The accent border and padding flip automatically.

.note {
  border-inline-start: 4px solid #16a34a;
  padding-inline-start: 12px;
  padding-block: 8px;
  margin-inline: 0 40px;
  background: #f0fdf4;
  text-align: start;
  font-family: sans-serif;
}
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 2 to 3The border and padding are on the starting edge: left in English, right in Arabic.
  2. Line 5The 40px end margin flips side too.
  3. Line 7start aligns text to the start of the line in either direction.

Common CSS Nesting Mistakes

Forgetting & for pseudo-classes

Don't
.btn {
  :hover { color: red; } /* means .btn :hover, any hovered descendant */
}
Do
.btn {
  &:hover { color: red; }
}

Nesting too deep

Don't
.page { .main { .content { .post { .title { a { color: blue; } } } } } }
Do
.post-title a { color: blue; }

Deep nesting produces long, highly specific selectors.

Mixing physical and logical for the same edge

Don't
.box { margin-left: 20px; margin-inline-start: 0; } /* confusing; both set the left edge in English */
Do
.box { margin-inline-start: 20px; }

Pick one style for a property and stick with it.

CSS Nesting in Real Projects

Where you'll see them

Since 2023, nesting has been supported in every major browser, and many teams have dropped Sass just for nesting. Frameworks such as Tailwind CSS v4 generate logical properties, and sites translated into Arabic, Hebrew or Persian rely on them to flip layouts with a single dir="rtl". Logical shorthands like inset: 0 and margin-inline: auto now appear in most modern codebases.

CSS Nesting Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Style the card's hover state inside the nested rule.

.card {
  :hover { box-shadow: 0 4px 12px rgb(0 0 0 / 0.1); }
}
Multiple choiceeasy

What does & h3 mean inside .card { }?

Multiple choicemedium

Which logical property sets top and bottom padding?

Multiple choicemedium

What does .dark & match when nested inside .card?

Fix the bugmedium

The button should turn green on hover (not its children), and use logical padding of 10px top and bottom and 20px start and end. Fix it.

.b {
  padding-left: 20px;
  :hover { background: rgb(22, 163, 74); }
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Block padding is 10px
  • Inline padding is 20px
  • Hover uses &

CSS Nesting Quiz

5 questions to check what you learned.

  1. Do you need Sass to nest CSS today?

    • No, modern browsers support native nesting
    • Yes, always
    • Only for media queries
    • Only in Chrome

  2. In a left-to-right language, what is margin-inline-end?

    • The top margin
    • The left margin
    • The bottom margin
    • The right margin

  3. What does inset: 0 do?

    • Removes padding
    • Sets top, right, bottom and left to 0
    • Adds an inner shadow
    • Resets margins

  4. Why keep nesting shallow?

    • Browsers limit it to two levels
    • It makes CSS slower to download
    • Nested rules can't use classes
    • Deep nesting creates long, highly specific selectors that are hard to override

  5. Inside a nested @media block, which element do bare declarations apply to?

    • body
    • Every element
    • The parent rule's selector
    • None, they're ignored

CSS Nesting Challenge

A nested, logical alert

  1. Give .alert padding-block: 12px, padding-inline: 16px and border-inline-start: 4px solid rgb(37, 99, 235)
  2. Inside .alert, nest a rule so .alert.error has a border-inline-start-color of rgb(220, 38, 38)
  3. Inside .alert, nest a rule so its strong children have margin-inline-end: 6px
  4. Inside .alert, nest a media query so from min-width: 600px the padding-inline is 24px
.alert {
  font-family: sans-serif;
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Logical padding and border
  • Error variant is red
  • Strong has an end margin
  • Nested media query

Related CSS topics

04SelectorsTarget exactly the elements you want by tag, class, id, family or attribute.15Margin & PaddingSpace inside and outside elements, shorthands and centring.30Specificity & CascadeWhich rule wins when two rules disagree, and how to stop fighting your CSS.
Esc
↑↓ to navigateEnter to open