interview

home / developersection / interviews / different types of combinators in css.

Ask Question
Abhishek Srivasatava

Employee

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.

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy