Sibling (+) selectors don't work as expected
I've encountered a weird css rendering bug where styles applying to sibling selectors aren't being applied correctly.
Example CSS:
.section {
color: red;
}
.chapter + .section {
color: blue;
}
Example HTML:
<h3 class="section">This is red</h3>
<p>...Some text...</p>
<h2 class="chapter">...Some title...</h2>
<h3 class="section">This should be blue, but renders red</h3>
The second section title renders blue only when I add an !important
declaration.
.chapter + .section {
color: blue !important;
}
I've tried to increase the specificity (i.e. .chapter[class] + .section[class]
) and juggle the order of the styling blocks to no avail.
BTW, this applies to all CSS properties — not only color
.
Version affected
I'm using pagedjs@0.2.0
and pagedjs-cli@0.1.6