[CSS] CSS Combinator Selector - Explained with Examples
Descendant, Child, Adjacent Sibling and General Sibling Selectors
![[CSS] CSS Combinator Selector - Explained with Examples](https://cdn.hashnode.com/res/hashnode/image/upload/v1682956053567/3216fb7a-76b6-41d8-a36b-7fc5e8cb8c0b.webp?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
Table of contents
Introduction
Combinator selectors in CSS describe the relationship between selectors. CSS allows us to select more than one content for the styling, and it is done by using combinator selectors.
Combinator selectors are useful because it allows us to select the attribute that we want to give certain styles.
There are four types of combinator selectors
Descendant Selector (space)
Child Selector (>)
Adjacent Sibling Selector (+)
General Sibling Selector (~)
Descendant Selector (space)
Descendant Selector will select all the elements that come after the parent element.
Syntax:
parent child {
/* write some codes for style */
}
This code means that the style will be applied to the <p> tags that have a <div> tag as their parent.
CSS Code Snippet:
div p {
/* write some codes for style */
}
HTML Code Snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>
<p>Paragraph1</p>
<p>Paragraph2</p>
<span>
<p>This p tag will also be affected.</p>
</span>
</div>
<p>This will not be affected because it is not in the div.</p>
</body>
Child Selector (>)
The difference between the child selector and the descendant selector:
The child selector selects the elements that are an intermediate child.
On the other hand, the descendant selector selects all the elements that are placed inside the parent tag.
Syntax:
parent > child {
/* write some codes for style */
}
CSS Code Snippet:
div > p {
/* write some codes for style */
}
HTML Code Snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>
<p>Paragraph1</p>
<p>Paragraph2</p>
<span>
<p>This will not be affected as it is not intermediate child of div tag.</p>
</span>
</div>
<p>This will be affected.</p>
</body>
</html>
Adjacent Sibling Selector (+)
This selector allows you to select the element that is placed adjacent to a certain element. In other words, this selector selects the element that is placed next to the specified tag.
Syntax:
element + element {
/* write some codes for style */
}
Let's look at some codes for a better understanding
CSS Code Snippet:
p + p {
/* write some codes for style */
}
HTML Code Snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</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 gets 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>
General Sibling Selector (~)
It selects the elements that follow the elements of the first selector, and both of them are children of the same parent.
When to use it?
It is useful when we have to select the siblings of an element even if they are not adjacent directly.
When you want to select the elements that share the same parent.
Syntax:
element ~ element {
/* write some codes for style */
}
CSS Code Snippet:
h1 ~ p {
/* write some codes for style */
}
HTML Code Snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div p {
color: red;
}
</style>
</head>
<body>
<h1>General sibling selector (~) property</h1>
<p>It is the first paragraph element which will get effected.</p>
<div>
<p>This is not effected because it is under div tag.</p>
</div>
<p>It is the paragraph element after the div, and it will be affected.</p>
<p>It is the paragraph element which will also get affected.</p>
</body>
</html>
Conclusion
We can select different elements by using some special characters, such as (>), (+) and (~). These are called combinator selectors, and they allow us to select the elements that we want.