DIFFERENT TYPES OF COMBINATORS IN CSS.

Abhishek Srivasatava

Total Post:70

Points:350
Posted by  Abhishek Srivasatava
CSS 
 337  View(s)
Ratings:
Rate this:
  1. Abhishek Srivasatava

    Post:70

    Points:350
    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

    <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

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!