Family Ties in HTML

Combinators describe relationships between selectors. This allows selecting elements based on their position in the structure.

1. Descendant (Space)

Selects all descendants at any nesting depth.

article p { color: #333; } /* All 'p' inside 'article', even if nested in other divs */

2. Child Selector (>)

Selects only direct descendants (first-level children).

nav > ul { margin: 0; } /* Selects 'ul' that is a direct child of 'nav' */

3. Adjacent Sibling (+)

Selects only one element that comes immediately after the specified one.

h2 + p { font-variant: small-caps; } /* Only the first paragraph AFTER the heading */

4. General Sibling (~)

Selects all elements that come after the specified one at the same nesting level.

h2 ~ p { color: red; } /* All paragraphs after h2 will become red */