Encodera

Thanks for reading!

Donate to the site — we work hard for you.

HTML & CSS reference

&

The nesting selector: inside a nested rule, `&` stands for the parent selector.

Syntax

.parent { &:hover { … } }

Examples

Child and state rules written inside the parent:

<style>
  .card {
    padding: 12px;
    border: 1px solid lightgray;
    & h3 { margin: 0 0 6px; color: teal; }
    &:hover { border-color: teal; }
  }
</style>
 
<div class="card"><h3>Nested CSS</h3>Hover over the card.</div>

Notes

Native CSS nesting works in all current browsers since 2023. &:hover means the element itself in the hover state; & h3 (with a space) means an h3 inside it. Keep nesting shallow — two or three levels at most.

See also

  • :hover — Matches an element while the mouse pointer is over it.
  • A B — The descendant combinator: selects elements B that are anywhere inside an element A.

In the tutorial

  • CSS nesting — Native rule nesting in CSS — rules inside rules, the & symbol, nested media queries and browser support.

Thanks for reading!

Donate to the site — we work hard for you.