Introduction to CSS Combinators
CSS also includes other ways of targeting elements by using selectors that are known as combinators together, and in this article, we will explain what these combinators are and how to use them in CSS. CSS combinator is something that describes how selectors relate to each other. A CSS selector could have more than one single selector in it. We may provide a combinator between the simple selectors.
The CSS combinators may assure that CSS is accurate by optimizing associations of elements without overwhelming the HTML. Within a CSS selector, there may be more than one specific selector, so we may have a combinator between those selectors. Combinators incorporate the selectors to use them as a useful connection and content location in the document.
Combinators in CSS
There are four types of CSS combinators available and can be described as shown below with the examples:
- General sibling selector
- Adjacent sibling selector
- Child selector
- Descendant selector
1. General sibling selector
The general sibling selector selects elements of a given element, which are their siblings at the same level. The general sibling selector works similarly to an adjacent sibling but it will select all siblings that appear after the defined element-even if they are not adjacent to each other. The general sibling selector can be specified with the tilde operator (~).
Syntax:
element_name ~ element_name {
// CSS styles
}
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS Combinator Example </title>
<style>
body{
text-align: center;
background-color: #8FBC8F;
}
div ~ p {
background-color: #FFD700;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h2> General sibling selector </h2>
<p> This is first paragraph... </p>
<div>
<p> This is second paragraph... </p>
</div>
<p> This paragraph will get effect... <br>
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs of 500,000+ members across 40+ Countries.
</p>
<code> Here, some code will be created... </code>
<p> This paragraph will also get effect... <br>
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs of 500,000+ members across 40+ Countries.
</p>
</body>
</html>
Output:
In the above example, we are selecting the ‘p’ elements which come after the div tag. There is one ‘p’ element before div tag and inside the div tag which will not get selected. The ‘p’ elements after the div tag will get selected.
4.5 (7,533 ratings)
View Course
2. Adjacent sibling selector
This matches the second element whenever the element follows the first element immediately, while both are children of the same parent. This sibling selector identifies the adjacent element, or we can assume the element next to the tag you specify. In simpler terms, we could conclude that the adjacent sibling selector is efficient, allowing an element to be identified whenever it is next to another.
The adjacent sibling selector can be specified with the plus operator (+).
Syntax:
element_name + element_name {
// CSS styles
}
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS Combinator Example </title>
<style>
body{
text-align: center;
background-color: #8FBC8F;
}
p + p {
background-color: #FFD700;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h2> Adjacent sibling selector </h2>
<p> This is first paragraph... </p>
<div>
<p> This is second paragraph... </p>
</div>
<p> EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs of 500,000+ members across 40+ Countries.
</p>
<p> This paragraph will get effect... <br>
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs of 500,000+ members across 40+ Countries.
</p>
</body>
</html>
Output:
In the above example, we are selecting the ‘p’ element which comes after the ‘p’ element. The ‘p’ element which is inside the div tag will not be affected. The last paragraph will come before the third paragraph will be selected as the adjacent sibling selector as this selector selects its immediate element.
3. Child selector
The child selector identifies the parent’s immediate descendant. This combinator only matches those elements in the document tree which are the immediate child. Compared to the descendant selector it is more restrictive as it selects the second selector only when its parent is the first selector.
The child selector can be specified with greater than operator (>).
Syntax:
element_name > element_name {
// CSS styles
}
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS Combinator Example </title>
<style>
body{
text-align: center;
background-color: #8FBC8F;
}
div > p {
background-color: #FFD700;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h2> Child selector </h2>
<p> This is first paragraph... </p>
<div>
<p> This is second paragraph...This paragraph will affect... </p>
</div>
<p> EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs of 500,000+ members across 40+ Countries.
</p>
<div>
<p> This paragraph will get affect... <br>
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs of 500,000+ members across 40+ Countries.
</p>
</div>
</body>
</html>
Output:
In the above example, we are selecting the ‘p’ elements which are child elements of the div tag. In the image, we can see that the second paragraph and fourth paragraph are child elements of the div tag, so these paragraphs will get affected as these are direct child elements of the div tag.
4. Descendant selector
The descendant selector determines the all descending elements of a specified element. The term descendant implies nested in the DOM tree wherever it is. It may be a direct child or higher than five levels, but it is always considered a descendant. It utilizes space as the separator between both the elements.
Syntax:
element_name element_name {
// CSS styles
}
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS Combinator Example </title>
<style>
body{
text-align: center;
background-color: #8FBC8F;
}
div p {
background-color: #FFD700;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h2> Descendant selector </h2>
<div>
<p> This is first paragraph... </p>
<p> This is second paragraph... </p>
</div>
<p> EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs of 500,000+ members across 40+ Countries.
</p>
<div>
<p> This is fourth paragraph... </p>
</div>
</body>
</html>
Output:
In the above example, we have selected the first and second paragraphs which are children of the div tag. The div tag specifies an ancestor. i.e. parent element and paragraphs under div tag indicate descendants.
Conclusion
The connection between the two selectors is described by CSS Combinators, while the selectors in CSS are often used to specify content for styling. Combinators integrate the selectors to use them as a valuable relation and content position in the document. Often using classes is not that effective in some cases and instead using these combinators would help you write lesser code and do much more in CSS. That’s why Understanding them is good.
Recommended Articles
This is a guide to CSS Combinators. Here we discuss the introduction to CSS combinators along with 4 types, appropriate syntax, and respective examples. You may also have a look at the following articles to learn more –
