CSS Combinators
Combinators express how two or more selectors relate to each other.
One CSS selector may be built from several selectors, and placing a combinator between them makes the selection more specific.
CSS offers four of them: descendant combinator (space), child combinator (>), next sibling combinator (+), and subsequent-sibling combinator (~).
Descendant Combinator (space)
Children, grandchildren and anything deeper all count as descendants, and this combinator matches every one of them under the specified element.
Example
Every <p> inside a <div> gets selected.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Descendant Combinator</title>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Descendant Combinator</h2>
<p>This paragraph is not inside a div.</p>
<div>
<p>Paragraph 1 inside the div.</p>
<p>Paragraph 2 inside the div.</p>
<section>
<p>Paragraph inside a section, inside the div (still a descendant).</p>
</section>
</div>
<p>This paragraph is not inside a div.</p>
</body>
</html>
Child Combinator (>)
Only direct children of the specified element are selected by the child combinator.
Example
A <p> is selected here only if it is a direct child of a <div>.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Child Combinator</title>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Child Combinator</h2>
<p>This paragraph is not inside a div.</p>
<div>
<p>Paragraph 1 in the div (direct child).</p>
<p>Paragraph 2 in the div (direct child).</p>
<section>
<p>Paragraph inside a section (not a direct child of div).</p>
</section>
</div>
<p>This paragraph is not inside a div.</p>
</body>
</html>
Next Sibling Combinator (+)
Two elements are siblings when they share a parent. The next sibling combinator selects the one element placed directly after the specified element.
Example
Only the first <p> coming immediately after a <div> gets selected.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Next Sibling Combinator</title>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Next Sibling Combinator (+)</h2>
<p>This paragraph is before the div.</p>
<div>
<p>Paragraph inside the div.</p>
</div>
<p>This paragraph is immediately after the div (selected).</p>
<p>This paragraph is also after the div but not immediately (not selected).</p>
</body>
</html>
Subsequent-sibling Combinator (~)
Where the previous combinator stops at one element, the subsequent-sibling combinator selects every next sibling of the specified element.
Example
Every <p> that comes after a <div> as its sibling gets selected.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Subsequent-sibling Combinator</title>
<style>
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Subsequent-sibling Combinator (~)</h2>
<p>Paragraph 1 (before the div, not selected).</p>
<div>
<p>Paragraph inside the div.</p>
</div>
<p>Paragraph 2 (sibling after the div, selected).</p>
<p>Paragraph 3 (sibling after the div, selected).</p>
</body>
</html>