Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
>,+, and~(space)Descendant
>Child
+Adjacent
~Sibling
Selects all B elements inside A (any level deep)
/* Select ALL p inside div */
div p {
color: blue;
}
/* HTML matches:
<div>
<p>Match ✓</p>
<section>
<p>Match ✓ (nested)</p>
</section>
</div>
*/Selects B only if it's a direct child of A
/* Select ONLY direct p children */
div > p {
color: red;
}
/* HTML:
<div>
<p>Match ✓ (direct child)</p>
<section>
<p>No match ✗ (not direct)</p>
</section>
</div>
*/Selects B only if it immediately follows A
/* Style p immediately after h2 */
h2 + p {
font-weight: bold;
}
/* HTML:
<h2>Title</h2>
<p>Match ✓ (immediately after)</p>
<p>No match ✗ (not adjacent)</p>
*/Selects all B elements that are siblings after A
/* Style ALL p siblings after h2 */
h2 ~ p {
margin-left: 20px;
}
/* HTML:
<h2>Title</h2>
<p>Match ✓</p>
<div>Something</div>
<p>Match ✓ (still a sibling)</p>
*/<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<h1>🔗 CSS Combinators</h1>
<div class="example demo1">
<span class="label">Descendant: div p (all p inside div)</span>
<p>Direct p - Styled ✓</p>
<section>
<p>Nested p - Styled ✓</p>
</section>
</div>
<div class="example demo2">
<span class="label">Child: div > p (only direct children)</span>
<p>Direct p - Styled ✓</p>
<section>
<p>Nested p - NOT styled ✗</p>
</section>
</div>
<div class="example demo3">
<span class="label">Adjacent: h3 + p (immediately after h3)</span>
<h3>Heading</h3>
<p>First p after h3 - Styled ✓</p>
<p>Second p - NOT styled ✗</p>
</div>
<div class="example demo4">
<span class="label">General Sibling: h3 ~ p (all p after h3)</span>
<h3>Heading</h3>
<p>First p - Styled ✓</p>
<div>Some div</div>
<p>Second p - Still styled ✓</p>
</div>
</div>
</body>
</html>Loading preview...
A BAll B inside A (any level)
A > BB only if direct child of A
A + BB immediately after A
A ~ BAll B siblings after A