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.