Combinator Selectors are used to define the connection between the Selectors.
There can be multiple selectors in a CSS Selector. And between those selectors there can be a Combinator.
There can be four Combinator Selectors in CSS :
Let us understand them in detail :
The Child Combinator(>) selects all the elements those are children of a particular element.
You can define the Child Combinator using the > Operator.
Let us explain it with the below example.
<html>
<head>
<style>
div > p {
border: 3px solid red;
}
</style>
</head>
<body>
<div>
<p> This is the first paragraph that is selected </p>
<p> This is the second paragraph that is selected </p>
<span>
<p> This is the third paragraph but not selected</p>
</span>
</div>
</body>
</html>
So, if you look at the above output, only for the first two paragraphs red border is applied. However, for the third paragraph red border is not applied.
That is because the child combinator(>) selects all the <p> elements those are the children of <div> element.
<style>
div > p {
border: 3px solid red;
}
</style>However, the <p> element inside the <span> element is not a direct child of the <div> element.
<span> <p> This is the third paragraph but not selected</p> </span>
And that is why red border is not applied around the above paragraph.
The Descendant Combinator selects all the elements those are descendents of a particular element.
In other words, Descendant Combinator selects those elements which are inside a particular element.
You can define the Descendant Combinator using a white space.
Let us explain it with the below example.
<html>
<head>
<style>
div p {
border: 3px solid red;
}
</style>
</head>
<body>
<div>
<p> This is the first paragraph that is selected </p>
<p> This is the second paragraph that is selected </p>
<span>
<p> This is the third paragraph but not selected</p>
</span>
</div>
</body>
</html>
So, if you look at the above output, for all the three paragraphs red border is applied.
Just note that for the third paragraph also red border is applied.
<span> <p> This is the third paragraph but not selected</p> </span>
That is because the Descendant combinator selects all the <p> elements those are inside of <div> element.
<style>
div p {
border: 3px solid red;
}
</style>Subsequent Sibling combinator(~) selects those elements which are just after the particular element.
<html>
<head>
<style>
div ~ p {
border: 3px solid red;
}
</style>
</head>
<body>
<div>
<p> This is the first paragraph </p>
</div>
<p> This is the second paragraph </p>
<p> This is the third paragraph </p>
</body>
</html>
So, in the above example, the second <p> element and the third <p> element is just after the <div> element.
<p> This is the second paragraph </p> <p> This is the third paragraph </p>
And the Subsequent Sibling combinator(~) selects the <p> elements those are just after the <div> element.
<style>
div ~ p {
border: 3px solid red;
}
</style>The Next Sibling Combinator(+) selects only one element which is just after the specified element.
<html>
<head>
<style>
div + p {
border: 3px solid red;
}
</style>
</head>
<body>
<div>
<p> This is the first paragraph </p>
</div>
<p> This is the second paragraph </p>
<p> This is the third paragraph </p>
</body>
</html>
So, in the above example, the red border is only applied across the second paragraph.
<p> This is the second paragraph </p>
And not on the third paragraph.
<p> This is the third paragraph </p>
That is because the Next Sibling Combinator selects the first <p> element that is just after the <div> element.
<style>
div + p {
border: 3px solid red;
}
</style>