What is syntax for selector in CSS for next element?

Question

If I have a header tag <h1 class="hc-reform">title</h1>

h1.hc-reform{
    float:left;
    font-size:30px;
    color:#0e73bb;
    font-weight:bold;
    margin:10px 0px;
}

and after that I have a paragraph <p>stuff here</p>.

How can I ensure using CSS that every <p> tag that follows the h1.hc-reform to use: clear:both;

would that be:

h1.hc-reform > p{
     clear:both;
}

for some reason that's not working.

Communicable

Answer 1

This is called the adjacent sibling selector, and it is represented by a plus sign...

h1.hc-reform + p {
  clear:both;
}

Note: this is not supported in IE6 or older.

Zephaniah

That would only select the p that comes just after h1.hc-reform. Then again it might be the only one that the clear: both needs to be applied on for it to work since it simply clears the h1 float, so it's still a valid answer. – Threesquare

@Threesquare Yes you are correct, I mis-read the spec and deleted that comment because it was wrong. This selector will only match the p that is immediately preceded by h1.hc-reform (with the same parent element, of course). – Zephaniah

wow didn't know about the adjacent sibling selector. Nice, thanks! – Forbore

~ is a better selector in this case. Here a working JSfiddle jsfiddle.net/dZAtt – Engaged

worth noting that this doesn't work if the first element has any children – Zenaidazenana

Any polyfills for IE6? ;) – Putupon

@DanielDewhurst Peace be with you mate..!! – Megalopolis

Answer 2

You can use the sibling selector ~:

h1.hc-reform ~ p{
     clear:both;
}

This selects all the p elements that come after .hc-reform, not just the first one.

Belch

The IE bugs in the first link are obscure edge case stuff, which is probably why quirksmode overlooks them. – Glimmer

Answer 3

no > is a child selector.

the one you want is +

so try h1.hc-reform + p

browser support isn't great

Cadmar

2020: Browser support is great after ten years. Just a info for CSS novices. – Volgograd

Answer 4

The > is a child selector. So if your HTML looks like this:

<h1 class="hc-reform">
    title
    <p>stuff here</p>
</h1>

... then that's your ticket.

But if your HTML looks like this:

<h1 class="hc-reform">
    title
</h1>
<p>stuff here</p>

Then you want the adjacent selector:

h1.hc-reform + p{
     clear:both;
}

Tout

I sure hope he didn't nest p's inside h1's.. Also, adjacent only selects the first p. – Belch

Answer 5

Not exactly. The h1.hc-reform > p means "any p exactly one level underneath h1.hc-reform".

What you want is h1.hc-reform + p. Of course, that might cause some issues in older versions of Internet Explorer; if you want to make the page compatible with older IEs, you'll be stuck with either adding a class manually to the paragraphs or using some JavaScript (in jQuery, for example, you could do something like $('h1.hc-reform').next('p').addClass('first-paragraph')).

More info: http://www.w3.org/TR/CSS2/selector.html or http://css-tricks.com/child-and-sibling-selectors/

Saith