SPACE Descendant Combinator
Selects all elements that are descendants (nested inside) of a specified element, regardless of how deep the nesting is.
div p {
color: red;
font-weight: bold;
}
color: red;
font-weight: bold;
}
div (parent)
p (direct child) - SELECTED
spanp (nested descendant) - SELECTED
p (not inside div) - NOT selected
> Child Combinator
Selects only direct children of a specified element. It does not select grandchildren or deeper descendants.
div > p {
background: yellow;
border: 2px solid orange;
}
background: yellow;
border: 2px solid orange;
}
div (parent)
p (direct child) - SELECTED
span (direct child)p (grandchild) - NOT selected
p (not child of div) - NOT selected
+ Adjacent Sibling Combinator
Selects an element that immediately follows another element, and both share the same parent.
h3 + p {
background: lightgreen;
margin-top: 0;
}
background: lightgreen;
margin-top: 0;
}
h3 heading
p (immediately after h3) - SELECTED
p (second paragraph) - NOT selected
div between
h3 heading
p (immediately after h3) - SELECTED
~ General Sibling Combinator
Selects all elements that are siblings and come after a specified element (not necessarily immediately).
h3 ~ p {
border-left: 4px solid blue;
padding-left: 15px;
}
border-left: 4px solid blue;
padding-left: 15px;
}
p (before h3) - NOT selected
h3 heading
p (after h3) - SELECTED
div between
p (also after h3) - SELECTED
span (not a p) - NOT selected📋 Quick Reference
A B
Descendant - All B inside A
Descendant - All B inside A
A > B
Child - Direct B children of A
Child - Direct B children of A
A + B
Adjacent - B immediately after A
Adjacent - B immediately after A
A ~ B
General Sibling - B after A (same parent)
General Sibling - B after A (same parent)