CSS Combinators clarifies the relationship between two selectors, whereas the selectors in CSS are used to select the content for styling.
There can be more than one simple selector in a CSS selector , and between these selectors, we can include a combinator. Combinators combine the selectors to provide them a useful relationship and the position of content in the document.
There are four types of combinators in CSS that are listed as follows:
- General sibling selector (~)
- Adjacent sibling selector (+)
- Child selector (>)
- Descendant selector (space)
General Sibling Selector (~)
It employs the tilde (~) symbol as the delimiter between the elements. It chooses the elements that come after the elements of the initial selector, and both are offspring of the identical parent. This method can be applied to pick a set of elements that have a shared parent element.
It comes in handy when we need to target the siblings of an element, even when they are not directly adjacent.
Syntax
element ~ element {
/*style properties*/
}
Suppose we need to choose all <p> elements that are siblings of the <div> element, we can express it in this manner:
div ~ p {
/*style properties*/
}
The diagram provided below assists in explaining the General sibling selector (~).
In this diagram, the blocks highlighted in green represent the chosen elements impacted following the application of the general sibling selector.
Example
In this example we are selecting the <p> elements that come after the <h1> . There is a <div> element which will not get selected and the paragraph element inside the div will also not get selected. But those <p> elements that come after the <div> will be affected.
This example demonstrates the functionality of a General sibling selector (~).
<!DOCTYPE html>
<html>
<head>
<title>General Sibling Selector</title>
<style>
body{
text-align: center;
}
h1 ~ p{
color: blue;
font-size: 25px;
font-weight: bold;
text-align: center;
}
div {
font-size: 32px;
}
</style>
</head>
<body>
<h1>General sibling selector (~) property</h1>
<p>It is the first paragraph element which will get effected.</p>
<div> It is the div element
<p> It is the paragraph under the div element </p>
</div>
<p>It is the paragraph element after the div</p>
<p>It is the paragraph element which will also get affected</p>
</body>
</html>
Output
Adjacent Sibling Selector (+)
It utilizes the plus (+) symbol as the differentiator between the components. It identifies the second component specifically when it directly succeeds the first component, and both are offspring of the identical parent. This adjacent selector chooses the neighboring element, or in other words, the element that is adjacent to the designated tag.
It exclusively picks the element adjacent to the specified initial element.
Syntax
element + element {
/*style properties*/
}
If you need to choose the paragraph directly following another paragraph, you can achieve this by utilizing the adjacent selector in the following manner:
p + p {
/*style properties*/
}
The diagram provided below aids in grasping the concept of the Adjacent sibling selector (+).
In this diagram, the green-colored blocks represent the selected elements impacted by the adjacent sibling selector. These are the paragraph elements chosen when they directly follow another paragraph element.
Example
In this example we are selecting the <p> element that comes immediately after the <p> element. There is an <div> element that will not be selected, and the paragraph element after the div will also not be selected. But the <p> element that comes just next to the third paragraph will be affected.
This illustration will demonstrate the functionality of the Adjacent sibling selector (+).
<!DOCTYPE html>
<html>
<head>
<title> Adjacent Sibling Selector </title>
<style>
body{
text-align: center;
}
p + p{
color: Blue;
font-size:25px;
font-weight: bold;
text-align: center;
}
p {
font-size: 32px;
}
</style>
</head>
<body>
<h1> Adjacent sibling selector (+) property</h1>
<p> It is the first paragraph </p>
<p> It is the second paragraph which is immediately next to the first paragraph, and it get selected. </p>
<div> This is the div element </div>
<p> This is the third paragraph which does not get affected </p>
<p> This paragraph is also selected because it immediately next to third paragraph </p>
</body>
</html>
Output
Child Selector (>)
It employs the ">" symbol as the delimiter between elements. This selector targets the direct child of the parent element. Unlike the descendant selector, this combinator specifically picks elements that are direct children in the hierarchy. It enforces a stricter rule where the second selector is chosen only if it is a direct child of the first selector.
The parent element should consistently be positioned to the left of the ">" symbol. Eliminating the ">" symbol, which signifies a child combinator, will transform it into a descendant selector.
Syntax
element > element {
/*style properties*/
}
If we need to choose the paragraph elements that are descendants of the specified <div> element, we can achieve this by utilizing the child selector in the following manner:
div > p {
/*style properties*/
}
The diagram provided below aids in comprehending the child selector (>).
In this diagram, the blocks highlighted in green represent the chosen blocks impacted following the utilization of the child selector. As illustrated in the diagram, only paragraph elements directly nested within the div element are selected.
Example
In this instance, we are choosing the <p> elements that serve as descendants of a <div> element. Specifically, it targets paragraph elements that are directly nested within the div element.
This example will demonstrate the application of the child sibling selector (>).
<!DOCTYPE html>
<html>
<head>
<title> Child Selector </title>
<style>
body{
text-align: center;
}
div > p{
color: Blue;
font-size:25px;
font-weight:bold;
text-align:center;
}
p {
font-size: 20px;
}
</style>
</head>
<body>
<h1> Child selector (>) property</h1>
<p> It is the first paragraph </p>
<p> It is the second paragraph </p>
<div>
<h1>This is the div element</h1>
<p> This is the third paragraph which is the child of div element </p>
<p> This is the fourth paragraph and also get selected because it is also the child of div element </p>
</div>
</body>
</html>
Output
Descendant Selector (space)
It utilizes the space as the differentiator among the components. The CSS descendant selector is employed to identify the descendant elements of a specific element and portray it by utilizing a solitary space. The term descendant signifies nested in any part of the DOM tree. It may be an immediate child or more profound than five tiers, yet it will always be denoted as a descendant.
It merges two selectors where the initial selector denotes a predecessor (such as a parent, grandparent, etc.), and the subsequent selector represents offspring. Elements that meet the criteria of the second selector are chosen when they are situated within an ancestor element that fulfills the conditions set by the first selector.
Syntax
element element {
/*style properties*/
}
If we need to choose the paragraph components that are offspring of a specific parent element, we can achieve this by employing the descendant selector in the following manner:
div p {
/*style properties*/
}
The diagram provided below assists in comprehending the descendant selector.
Example
<!DOCTYPE html>
<html>
<head>
<title> Descendant Selector </title>
<style>
body{
text-align: center;
}
div p{
color: blue;
font-size:28px;
font-weight: bold;
text-align: center;
}
p,div {
font-size: 25px;
}
</style>
</head>
<body>
<div>
<p> This is 1st paragraph in the div. </p>
<p> This is 2nd paragraph in the div. </p>
<span>
This is the span element in the div
<p> This is the paragraph in the span. It will also be affected. </p>
</span>
</div>
<p> Paragraph 4. It will not be affected because it is not in the div. </p>
</body>
</html>
Output