CODEWITHSUNDEEP
htmlcsscss-selectors
vandu
vandu

Reputation: 196

Adjacent sibling selector is not working for h3 element

My HTML DOM is given below. I want to remove margin and padding for all h3 elements which is an immediate sibling of div (id=successor). I used adjacent sibling selector "+" to acheive this. But im not getting the expected output. Please help me.

<style type="text/css">
    div#successor {
       display: block;
   }
   div#successor+h3 {
      padding :0 !important;
      margin :0 !important;
      border: 1px solid red;
   }
</style>
<div id="access">
<div class="profile clearfix">
    <div id="successor" class="memeberDetails">
        <h3>Personal</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam purus dolor, vulputate iaculis erat ut, pulvinar commodo orci.Cras ac lorem a lectus luctus vestibulum. Suspendisse odio ligula, fringilla ut ultrices sed, aliquam nec ligula. Praesent porttitor,</p>
        <br />
        <h3>Training</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam purus dolor, vulputate iaculis erat ut, pulvinar commodo orci.</p>
        <br />
        <h3>Contact</h3>
        <p>Lorem ipsum dolor sit amet</p>

</div>
</div>
</div>

Upvotes: 0

Views: 181

Answers (2)

luke
luke

Reputation: 3599

If you want to add styles to h3 elements you need to select them by:

div#successor>h3

Adjacent selector selects element next to the object on the left of '+' operator, so it will work if you have such structure:

<div id="successor" class="memeberDetails">
    ...
</div>
<h3>...</h3>

Upvotes: 1

Emil Condrea
Emil Condrea

Reputation: 9983

As IMSoP said #successor is the parent and you want to select its immediate child. You might want to use : div#successor>h3 Here is a working example: http://jsfiddle.net/Au4Vh/

Upvotes: 1

Related Questions