Native Nesting & Cascade Layers

Native nesting — keep related rules together

Normally every rule starts from scratch, so you repeat the parent selector again and again (.card, .card h3, .card:hover...). Native nesting lets you write child and state rules inside the parent’s braces, so related styles live together. CSS now supports this with no preprocessor needed.

The & symbol means “the current element” (the parent you are nested inside). Read the example, then the walk-through:

<style>
  .card {
    border: 1px solid #e6e8f0; border-radius: 12px; padding: 16px; background: #fff;

    & h3 { color: #4338ca; margin: 0 0 6px; }   /* .card h3 */
    & p  { color: #5b6178; }                     /* .card p  */

    &:hover { box-shadow: 0 10px 24px rgba(20,24,48,.12); }  /* .card:hover */
  }
</style>

<div class="card">
  <h3>Nested styles</h3>
  <p>The heading, paragraph and hover all live inside .card.</p>
</div>

Everything about the card sits in one block instead of three separate rules:

• & h3 — the & stands in for .card, so this compiles to .card h3 (a heading inside the card).
• & p — likewise becomes .card p.
• &:hover — becomes .card:hover. Putting & directly before :hover (no space) attaches the state to the card itself.
• The payoff: when you move or rename the component, all its rules travel together — far less repetition and fewer “where did I style this?” hunts.

Cascade layers — deciding who wins on purpose

You learned in the Cascade lesson that specificity decides which rule wins, and that fights over specificity get messy (people reach for !important). Cascade layers give you a cleaner tool: you sort your CSS into named layers and declare their order once. Later layers always beat earlier ones — regardless of selector specificity.

You declare the order with @layer name1, name2, ... and then put rules inside @layer name { ... } blocks. The order line is what matters: whichever layer is listed last wins. Read this carefully — the result is deliberately surprising:

<style>
  /* Declare the order: base first, then theme. theme wins ties. */
  @layer base, theme;

  @layer theme {
    p { color: #16a34a; }            /* simple element selector */
  }

  @layer base {
    #intro { color: #ef4444; }        /* an ID — normally very strong! */
  }
</style>

<p id="intro">What colour am I?</p>

Here is the twist. By normal rules, an ID selector (#intro) crushes a plain element selector (p) on specificity — so you might expect red. But the paragraph is green. Why?

1. @layer base, theme; declares the order: base first, then theme. The last-named layer (theme) wins any conflict.
2. The #intro red rule lives in the base layer; the p green rule lives in the theme layer.
3. Because theme is ordered after base, its green rule wins — even though its selector is far weaker. Layer order overrides specificity.