CSS Combinators
The CSS combinators represent the relationship between two selectors. The CSS selectors are the patterns that can be used for styling the particular HTML element. Sometimes, it is possible that there is more than one simple selector, and to combine the multiple simple selectors, we use the combinators.
Types of Combinators in CSS
The combinators are of 4 types, which are given below:
- Descendant selector ( ) (space)
- Child selector (>)
- Adjacent sibling selector (+)
- General sibling selector (~)
Descendant Selector in CSS
The descendant selector is used when we want to give the same styling to the multiple elements and then separate all the selectors by applying the space (descendant selector) between them. All the selectors that can be separated using the descendant selector should be the direct child of the element or deeper than 4-5 levels, but all the elements should have the same ancestors.
Syntax of descendant selector in CSS
The syntax for the descendant selector is given below:
div h4{
/* styling properties*/
property: value;
}
Example: Descendant Selector in CSS
In the given example, we use the two selectors div and p. So, the specified CSS properties are accepted by only those p selectors who are the descendent of the div element.
<!DOCTYPE html>
<html>
<head>
<title>Descendant Selector</title>
<style>
div p{
background-color: orange;
height: 30px;
width: 100%;
}
</style>
</head>
<body>
<div>
<p>Line 1</p>
<p>Line 2</p>
<p>Line 3</p>
</div>
<p>Line 4</p>
<p>Line 5</p>
</body>
</html>
Output:
As we can see in the output that the CSS property is applied only to those <p> elements which are the child of the <div> element.
Child Selector
The child selector uses the greater than sign (>) to separate the elements. The child selector is used when we want to apply the styling properties to the immediate child/children of the particular HTML element. This combinator is quite strict than the descendant selector and the styling properties are acquired only when the second selector is the direct child of the first one.
Syntax of Child Selector in CSS
The syntax for the child selector is given below:
div > p {
/* styling properties*/
property: value;
}
Example: Child Selector in CSS
In the given example, we have specified the CSS properties for the div element using the child selector (>). The properties are applied only to those p elements which are the direct child of the div element. The remaining p element has no effect on the CSS properties.
<!DOCTYPE html>
<html>
<head>
<title>Child Selector</title>
<style>
div > p{
background-color: orange;
height: 30px;
width: 100%;
}
</style>
</head>
<body>
<div>
<p>Line 1</p>
<p>Line 2</p>
</div>
<p>Line 3</p>
<p>Line 4</p>
<p>Line 5</p>
</body>
</html>
Output:
As we can see on the output image that the CSS properties are applicable only to the first two elements line 1 and line 2. This is because we have specified the CSS properties for the p element using the child selector and the first two lines are the direct child of the div element.
Adjacent sibling Selector in CSS
The adjacent sibling selector is used when we want to apply the CSS property or styling to the adjacent sibling of any element. The siblings should have the same parent element and also the second element must be the immediate follower of the first element. The selectors are separated by adding the (+) sign between the separators.
Syntax for Adjacent sibling selector in CSS
The syntax for adjacent sibling selector is given below:
div + p {
/* styling properties*/
property: value;
}
Example: Adjacent sibling selector in CSS
In the given example, we have applied the CSS properties to the HTML elements using an adjacent sibling selector.
<!DOCTYPE html>
<html>
<head>
<title>Adjacent sibling Selector</title>
<style>
p + p{
background-color: orange;
height: 30px;
width: 100%;
}
</style>
</head>
<body>
<div>
<p>Line 1</p>
<p>Line 2</p>
</div>
<p>Line 3</p>
<p>Line 4</p>
<p>Line 5</p>
</body>
</html>
Output:
As we can see on the output image, the CSS properties are applied to only those <p> elements that are the immediate siblings of any other <p> element. The properties are acquired by Line 2, Line 4, and Line 5 because these three are the immediate sibling of the <p> element.
General Sibling Selector in CSS
The general sibling selector is used when the user wants to set the CSS properties for the elements that are the siblings of each other even if they are not the immediate ones. This selector is used when we have to set the styling properties of the elements that have the same parent element. This selector can be separated by adding the (~) sign between them.
Syntax of General Sibling Selector in CSS
The syntax for general sibling selector given below:
div ~ p {
/* styling properties*/
property: value;
}
Example: General Sibling Selector in CSS
In this example, the styling properties are acquired by the siblings of the <div> element.
Conclusion:
In this lesson, we have learned about the CSS combinators and how we can style the HTML elements using the CSS combinators. Also, we have learned the types of combinators, which are given below:
- Descendant selector ( ) (space)
- Child selector (>)
- Adjacent sibling selector (+)
- General sibling selector (~)
