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.

score 464 · Accepted Answer · answered Sep 07 '10 at 15:24

464

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.

answered Sep 07 '10 at 15:24

Josh Stodola

81,538
47
180
227

4

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. – BoltClock Sep 07 '10 at 15:25
@BoltClock 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). – Josh Stodola Sep 07 '10 at 15:31
4

wow didn't know about the adjacent sibling selector. Nice, thanks! – theorise Sep 07 '10 at 16:02
1

~ is a better selector in this case. Here a working JSfiddle http://jsfiddle.net/dZAtt/ – ProblemsOfSumit Jul 03 '13 at 08:51
worth noting that this doesn't work if the first element has any children – 72GM Jan 14 '19 at 10:43
Any polyfills for IE6? ;) – Daniel Dewhurst Feb 24 '21 at 11:47
@DanielDewhurst Peace be with you mate..!! – Clain Dsilva Jun 11 '21 at 16:07

Stephan Muller · Answer 2 · 2015-05-01T20:45:49.043

83

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.

edited May 01 '15 at 20:45

answered Sep 07 '10 at 15:30

Stephan Muller

27,018
16
85
126

The IE bugs in the first link are obscure edge case stuff, which is probably why quirksmode overlooks them. – Ax. Sep 07 '10 at 16:25

score 16 · Answer 3 · answered Sep 07 '10 at 15:25

16

no > is a child selector.

the one you want is +

so try h1.hc-reform + p

browser support isn't great

answered Sep 07 '10 at 15:25

Moin Zaman

25,281
6
70
74

15

2020: Browser support is great after ten years. Just a info for CSS novices. – AlexioVay Jan 05 '20 at 19:27

score 9 · Answer 4 · answered Sep 07 '10 at 15:26

9

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;
}

answered Sep 07 '10 at 15:26

Richard JP Le Guen

28,364
7
89
119

4

I sure hope he didn't nest p's inside h1's.. Also, adjacent only selects the first p. – Stephan Muller Sep 07 '10 at 15:31

score 2 · Answer 5 · answered Sep 07 '10 at 15:32

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/

What is syntax for selector in CSS for next element?

5 Answers5

Linked

Related