Which elements does each combinator match?
p + p matches Second only: Last comes right after a div, not a p.
Combinators join two selectors by a relationship: a space means "anywhere inside", > means "directly inside", + means "the very next sibling" and ~ means "any later sibling".
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
In a <ul class="steps">, give every list item except the first a top margin of 8px, using a combinator.
Make the paragraph immediately after every h3 italic, and every later paragraph in the same parent indented by 16px.
Explain it without notes
Explain the four combinators with one example each.
What is the difference between .card p and .card > p, and when does it matter?
Why can't a combinator select a parent or a previous sibling, and what does CSS offer instead?
Preview
Console
Nothing logged yet.Expected console output
.post p [ 'First', 'Second', 'Nested', 'Last' ]
.post > p [ 'First', 'Second', 'Last' ]
h2 + p [ 'First' ]
h2 ~ p [ 'First', 'Second', 'Last' ]
p + p [ 'Second' ]