What is syntax for selector in CSS for next element?

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.


Solution 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.

Solution 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.