Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

interview

home / developersection / interviews / different types of combinators in css.
Ask Question
Abhishek Srivasatava
Abhishek Srivasatava

Employee

Message

1 Answers

Abhishek Srivasatava
Abhishek Srivasatava 13 Oct 2016
Report Abuse

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 

<style>
Div h1
{
Background-color:red
}
</style>
<body>
<div>
<h1>MindStick in Allahabad</h1>
<p>MindStick is Software Company</p>
<h1>MindStick in Allahabad</h1>
<span><h1>MindStick is best company of this
Era</h1></span>
</div>
<h1>mindstick Competitor are no one<h1>
</body>

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:

<style>
Div > h1
{
Background-color:blue
}
</style>
<body>
<div>
<h1>MindStick in Allahabad</h1>
<p>MindStick is Software Company</p>
<h1>MindStick in Allahabad</h1>
<span><h1>MindStick is best company of this Era</h1></span>
</div>
<h1>mindstick Competitor are no one<h1>
</body>  

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:


<style>
Div + h1
{
Background-color:blue
}
</style>
<body>
<div>
<h1>MindStick in Allahabad</h1>
<p>MindStick is Software Company</p>
<h1>MindStick in Allahabad</h1>
<span><h1>MindStick is best company of this
Era</h1></span>
</div>
<h1>Mindstick Competitor is no one<h1>
<h1>Mindstick Competitor Features are<h1>
</body>  

In the above example, there will be no impact on 1st h1, 2nd h1, 4th <h1> and tag <p>.
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.

<style>
Div ~ h1
{
Background-color:blue
}
</style>
<body>
<div>
<h1>MindStick in Allahabad</h1>
<p>MindStick is Software Company</p>
<h1>MindStick in Allahabad</h1>
<span><h1>MindStick is best company of this
Era</h1></span>
</div>
<p>MindStick is Software Company</p>
<h1>Mindstick Competitor is no one<h1>
<h1>Mindstick Competitor Features are<h1>
</body>

In the above example there will be no impact on 1st <h1>, 2nd <h2>, 1st <p>, and 2nd <p>.
But 3rd<h1> and 4th h1 will have background color as blue.

MindStick Training