A CSS combinator is connected two selectors in a way that explains them a useful relationship to each other.
Today we will discuss that there are mainly four different types of combinators in CSS:
- descendant selector (space)
- child selector (>)
- adjacent sibling selector (+)
- general sibling selector (~)
Descendant Selector
This selector is used to match all the descendant elements of a specified particular element. The descendant selector represents by using a single space.
Let’s see the given example to understand how descendant selector works:
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul a {
font-size:10px;
color:#ccc;
}
</style>
</head>
<body>
<div class="bor-test"><ul>
<li><a>descendant selector (space)</a></li>
<li><a>child selector (>)</a></li>
<li>adjacent sibling selector (+)</li>
<li>general sibling selector (~)</li>
</ul></p>
</body>
</html>
Output
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
- descendant selector (space)
- child selector (>)
- adjacent sibling selector (+)
- general sibling selector (~)
Child combinator (>)
The child combinator (>) is written in the middle of 2 CSS selectors. It selects all those tags or elements matched by the second CSS selector(see fig) that are the immediate children of tags or elements matched by the first CSS selector.
For example, to select only <span> elements that are direct children of <h1> elements:
h2 > span
Let’s see the given example to understand how descendant selector works:
Example
<!DOCTYPE html>
<html>
<head>
<style>
h2 > span {
font-size:15px;
color:red;
}
</style>
</head>
<body>
<div class="bor-test">
<h2><span>descendant selector (space)</span></h2>
<h2><span>child selector (>)</span></h2>
<h2>adjacent sibling selector (+)</h2>
<h2>general sibling selector (~)</h2>
</body>
</html>
Output
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)
Adjacent sibling combinator
The Adjacent sibling selector is used between two CSS selectors, where an element is immediate to the specified element. This type of selector matches only one element that is just immediate to the specified element. For example, to select single <p> elements that are immediately preceded by a <h2> element:
h2 + p
Let’s see the given example to understand how adjacent sibling combinator works:
Example
<!DOCTYPE html>
<html>
<head>
<style>
h2 + p {
font-size:14px;
color:green;
}
div + p{
font-size:17px;
color:y#207cf1;
}
</style>
</head>
<body>
<div class="bor-test">
<h2>descendant selector (space)</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<div>
<p>Paragraph 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. .</p>
<p>Paragraph 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
<p>Paragraph 3. Lorem Ipsum is simply dummied text of the printing and typesetting industry. </p>
<p>Paragraph 4. Lorem Ipsum is simply dummied text of the printing and typesetting industry. </p>
</body>
</html>
Output
descendant selector (space)
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Paragraph 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. .
Paragraph 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Paragraph 3. Lorem Ipsum is simply dummied text of the printing and typesetting industry.
Paragraph 4. Lorem Ipsum is simply dummied text of the printing and typesetting industry.
General Sibling Selector (~)
This type of selector matches all elements that are children of the specified element. For example, to select all <p> elements that come after the <h2> element:
h2 ~ p
Let’s see the given example to understand how general sibling combinator works:
Example
<!DOCTYPE html>
<html>
<head>
<style>
h2 ~ p {
font-size:14px;
color:green;
}
div ~ p{
font-size:17px;
color:y#207cf1;
}
</style>
</head>
<body>
<div class="bor-test">
<h2>descendant selector (space)</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<div>
<p>Paragraph 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. .</p>
<p>Paragraph 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
<p>Paragraph 3. Lorem Ipsum is simply dummied text of the printing and typesetting industry. </p>
<p>Paragraph 4. Lorem Ipsum is simply dummied text of the printing and typesetting industry. </p>
</body>
</html>
Output
descendant selector (space)
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Paragraph 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. .
Paragraph 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Paragraph 3. Lorem Ipsum is simply dummied text of the printing and typesetting industry.
Paragraph 4. Lorem Ipsum is simply dummied text of the printing and typesetting industry.