interview

Home / DeveloperSection / Interviews / Different types of Combinators in CSS.

Ask Question
Abhishek Srivasatava

Abhishek Srivasatava

Follow

Can you answer this question?

Answer

1 Answers

Abhishek Srivasatava

Abhishek Srivasatava

13-Oct-2016

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.

Liked By