The element+element selector is used to select an element that is directly after another specific element.
The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.
A CSS Syntax rule consists of a selector, property, and its value. The selector points to the HTML element where CSS style is to be applied. The CSS property is separated by semicolons. It is a combination of selector name followed by the property: value pair that is defined for the specific selector.
A type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class is a simple selector.
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.
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.
no >
is a child selector.
the one you want is +
so try h1.hc-reform + p
browser support isn't great
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With