HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
A combinator is something that explains the relationship between the selectors
A combinator is something that explains the relationship between the selectors.
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
There are four different combinators in CSS:
The descendant selector matches all elements that are descendants of a specified element.
The following example selects all <p> elements inside <div> elements:
div p {
background-color: yellow;
}
The child selector selects all elements that are the children of a specified element.
The following example selects all <p> elements that are children of a <div> element:
div > p {
background-color: yellow;
}
The adjacent sibling selector is used to select an element that is directly after another specific element.
Sibling elements must have the same parent element, and "adjacent" means "immediately following".
The following example selects the first <p> element that are placed immediately after <div> elements:
div + p {
background-color: yellow;
}
The general sibling selector selects all elements that are next siblings of a specified element.
The following example selects all <p> elements that are next siblings of <div> elements:
div ~ p {
background-color: yellow;
}
Change the color of all <p> elements, that are descendants of <div> elements, to "red".
<style>
{
color: red;
}
</style>
<body>
<div>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</div>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
| Selector | Example | Example description |
|---|---|---|
| element element | div p | Selects all <p> elements inside <div> elements |
| element>element | div > p | Selects all <p> elements where the parent is a <div> element |
| element+element | div + p | Selects the first <p> element that are placed immediately after <div> elements |
| element1~element2 | p ~ ul | Selects every <ul> element that are preceded by a <p> element |