How to use the adjacent sibling combinator?

Question

We're trying to control vertical spacing on content and have everything working great except when content follows a div - consider the following:

<div>
  <ul>
    <li></li>
  </ul>
</div>

We'd like to remove top margin from all ul's that immediately follow a div so have been trying:

div + ul {
  margin-top: 0;
}

Is this the proper use for this selector?

We just can't seem to get it working - any pointers in the right direction would be much appreciated.

Cheers

Ben

***immediately follow a div*** this together with the HTML code you posted show me that you may want to mean **the first direct child**, so the rule should be `div > ul:first-child` — King King, Apr 30 '14 at 03:45
I'll add that (I believe) it's uncommon to declare margin-top on ul elements, usually you pad the container. — Wesley Murch, Apr 30 '14 at 03:48

score 2 · Answer 1 · answered Apr 30 '14 at 03:44

It has the word "adjacent" in it, this means "next to": your ul is not "next to" your div (on the same hierarchical level) but inside it.

What you want is a direct (not recursive) child selector, > so:

div > ul { ... }

And if it only happens to the first child of that div:

div > ul:first-child { ... }

1 Answers1