Encodera

Thanks for reading!

Donate to the site — we work hard for you.

HTML & CSS reference

A B

The descendant combinator: selects elements B that are anywhere inside an element A.

Syntax

A B { … }

Examples

Only the links inside .menu are white:

<style>
  .menu a { color: white; text-decoration: none; }
  .menu { background: slategray; padding: 8px; }
</style>
 
<nav class="menu"><a href="#">Home</a> <a href="#">Blog</a></nav>
<p><a href="#">A link outside the menu</a></p>

Notes

The space means "at any depth": children, grandchildren and further. To select only direct children, use A > B. Long chains like .page .content ul li a are fragile — they break when the markup changes.

See also

  • A > B — The child combinator: selects elements B that are direct children of A.
  • A + B — Sibling combinators: `+` selects the element right after A, `~` selects all following siblings of A.
  • .class — Selects elements that have the given class in the `class` attribute.

In the tutorial

  • Selectors — How to pick elements for styling — by tag, class, id, nesting and attribute.

Thanks for reading!

Donate to the site — we work hard for you.