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

Posted on    October-13-2016 11:56 PM

 CSS-CSS3 CSS 
Ratings:
 1 Answer(s)
  95  View(s)
Rate this:

Abhishek Srivasatava
Abhishek Srivasatava

Total Post:70

Points:350
Posted on    October-13-2016 11:56 PM

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.


Modified On Oct-14-2016 01:01:13 AM

Don't want to miss updates? Please click the below button!

Follow MindStick