I have a scenario where I want to apply CSS to the first child only if a second or other child exists in the parent. The '~' selector can achieve this, but it applies the style to siblings of the first child, and I need it the other way around.
TLDR: I want to make the <label> element red without any <div> element before it, but after it.
label ~ div {
color: red;
}
https://jsfiddle.net/q836Lev1/1/
label ~ div {
color: red;
}<fieldset>
<div></div>
<label>this label is red</label>
<div>works, but not good, there must be no first div.</div>
</fieldset>
<fieldset>
<label>this label is red</label>
<div>doesn't work, label should be red and div comes after.</div>
</fieldset>