What is syntax for selector in CSS for next element?

html css css-selectors siblings
tony noriega picture tony noriega · Sep 7, 2010 · Viewed 250.1k times · Source

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.

Answer

Josh Stodola picture Josh Stodola · Sep 7, 2010

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.

Related questions

Can I write a CSS selector selecting elements NOT having a certain class or attribute?

I would like to write a CSS selector rule that selects all elements that don't have a certain class. For example, given the following HTML: <html class="printable"> <body class="printable"> <h1 class="printable">…

Read More
CSS selector for text input fields?

How can I target input fields of type 'text' using CSS selectors?

Read More
How can I style even and odd elements?

Is it possible to use CSS pseudo-classes to select even and odd instances of list items? I'd expect the following to produce a list of alternating colors, but instead I get a list of blue items: <html> <…

Read More