---
title: "Different types of Combinators in CSS."
description: "Different types of Combinators in CSS."
author: "Abhishek Srivasatava"
published: 2016-10-13
updated: 2020-09-23
canonical: https://www.mindstick.com/interview/23085/different-types-of-combinators-in-css
category: "css-css3"
tags: ["css"]
reading_time: 4 minutes
---
# Different types of Combinators in CSS.
## Combinators in CSS (Cascading Style Sheet)
**\**
**Descendant selector (space)**
It is used when we need to apply all property to all the declare member.
**For example**
```
MindStick in Allahabad
MindStick is Software Company
MindStick in Allahabad
MindStick is best company of this
Era
mindstick Competitor are no one
```
Then the entire h1 tag inside the div will have background color as red.\
**Child selector (>)**
It is used for the entire element which is child element of the main element.
**For example:**
```
MindStick in Allahabad
MindStick is Software Company
MindStick in Allahabad
MindStick is best company of this Era
mindstick Competitor are no one
```
In the above example 1st h1 and 2nd h1 will have blue color, whereas there will be no impact on tag p, and 3rd h1.
**Adjacent sibling selector (+)**
It is used for the element which is just after the defined elements or we can say adjacent element.
**For example:**\
```
MindStick in Allahabad
MindStick is Software Company
MindStick in Allahabad
MindStick is best company of this
Era
Mindstick Competitor is no oneMindstick Competitor Features are
```
In the above example, there will be no impact on 1st h1, 2nd h1, 4th and tag
.\
Only 3rd h1 will have background color as blue
**General sibling selector (~) not**
We can say it is similar to Not condition because property will not impact on declare element. But for rest it will impact.
```
MindStick in Allahabad
MindStick is Software Company
MindStick in Allahabad
MindStick is best company of this
Era
MindStick is Software Company
Mindstick Competitor is no oneMindstick Competitor Features are
```
In the above example there will be no impact on 1st , 2nd , 1st
, and 2nd
. \
But 3rd
and 4th h1 will have background color as blue.
## Answers
### Answer by Abhishek Srivasatava
## Combinators in CSS (Cascading Style Sheet)
**\**
**Descendant selector (space)**
It is used when we need to apply all property to all the declare member.
**For example**
```
MindStick in Allahabad
MindStick is Software Company
MindStick in Allahabad
MindStick is best company of this
Era
mindstick Competitor are no one
```
Then the entire h1 tag inside the div will have background color as red.\
**Child selector (>)**
It is used for the entire element which is child element of the main element.
**For example:**
```
MindStick in Allahabad
MindStick is Software Company
MindStick in Allahabad
MindStick is best company of this Era
mindstick Competitor are no one
```
In the above example 1st h1 and 2nd h1 will have blue color, whereas there will be no impact on tag p, and 3rd h1.
**Adjacent sibling selector (+)**
It is used for the element which is just after the defined elements or we can say adjacent element.
**For example:**\
```
MindStick in Allahabad
MindStick is Software Company
MindStick in Allahabad
MindStick is best company of this
Era
Mindstick Competitor is no oneMindstick Competitor Features are
```
In the above example, there will be no impact on 1st h1, 2nd h1, 4th and tag
.\
Only 3rd h1 will have background color as blue
**General sibling selector (~) not**
We can say it is similar to Not condition because property will not impact on declare element. But for rest it will impact.
```
MindStick in Allahabad
MindStick is Software Company
MindStick in Allahabad
MindStick is best company of this
Era
MindStick is Software Company
Mindstick Competitor is no oneMindstick Competitor Features are
```
In the above example there will be no impact on 1st , 2nd , 1st
, and 2nd
. \
But 3rd
and 4th h1 will have background color as blue.
---
Original Source: https://www.mindstick.com/interview/23085/different-types-of-combinators-in-css
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.