CSS Combinators (Descendant, Child, Adjacent & Sibling)

Combinators explain the relationship between two selectors, allowing precise targeting based on DOM hierarchy.

Descendant Selector (space): Matches all matching elements inside the parent, no matter how deeply nested.

Child Selector (>): Matches only direct children (one level down) of the parent element.

Adjacent Sibling (+): Matches the element that immediately follows another specific element.

General Sibling (~): Matches all sibling elements that follow another element under the same parent.

⊞Code Example

/* Descendant: all <p> inside .article */

.article p {

line-height: 1.8;

}

/* Child: only direct <li> children of .nav-menu */

.nav-menu > li {

display: inline-block;

}

/* Adjacent: <p> immediately after an <h2> */

h2 + p {

font-size: 1.2rem;

color: #04AA6D;

}

/* General Sibling: all <p> following <h2> */

h2 ~ p {

margin-bottom: 1rem;

}