Descendant, child and sibling selectors.
✍️ 3 exercises + code challenge in this lessonCombinators select elements based on their relationship to other elements:
div p, every p anywhere inside a div.>): div > p, only direct children.+): h2 + p, the first p right after an h2.~): h2 ~ p, every p after an h2 with the same parent.Mastering CSS Combinators helps you write clean and reliable CSS code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.
<style>
.box p { color: #2563EB; }
.box > p { font-weight: bold; }
h3 + p { background: #FEF9C3; }
h3 ~ span { color: #E34F26; }
</style>
<div class="box">
<p>Direct child: blue and bold</p>
<section><p>Nested deeper: blue only</p></section>
</div>
<h3>Heading</h3>
<p>Right after the heading: yellow</p>
<span>A later sibling span: orange</span>Check what you learned in “CSS Combinators”.
Select only direct <p> children of .box.
.box p {
color: blue;
}
What does "h2 + p" select?
Make paragraphs inside .card red, but not the paragraph outside it.
Free sign-in required · Google login available
Stuck on something?
Ask the community in the CodesInTech forum.
Need a developer?
Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.
Explore Our Services