Skip to content

GitLab

Open
Created by Boris Budini@kominoshja🛡Owner

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

Edited by Boris Budini