Combinator Selectors

Combinator Selectors

These selectors define relationships between elements.

🔸 Descendant Selector (space)

Selects all matching elements inside another element.

div p {
  color: blue;
}

👉 Targets all <p> inside <div>

🔸 Child Selector (>)

Selects direct children only.

div > p {
  color: red;
}

🔸 Adjacent Sibling (+)

Selects the next immediate sibling.

h1 + p {
  color: orange;
}

🔸 General Sibling (~)

Selects all siblings after an element.

h1 ~ p {
  color: purple;
}