Cascading Styles & Specificity

[Turtle91]

This is probably not a Sigil thing, but it's showing up in a Sigil report and I can't figure out if it's my (lack of) understanding of Specificity/Cascading Styles, or if the report function has a baby gremlin...

I have some CSS in the middle of the stylesheet:

div.quote p.sig {margin:1em 0 0; text-align:right}

and on the last line of the stylesheet I have:

blockquote.write p.sig {text-align:right; margin:.25em 0 2em}

the html looks like this:

  <blockquote class="write">
    <p>Howdy,</p>

    <p>Yadda - Yadda</p>

    <p>Yadda Yadda Yadda</p>

    <p class="sig">Mary Poppins</p>
  </blockquote>

When I look at the inspector it shows what I would consider the correct styling being applied to the p.sig:

blockquote.write p.sig {
    text-align: right;
    margin: .25em 0 2em;
}

However, in Sigil's Classes Used report it shows "div.quote p.sig" as the matched selector. This causes my small brain confusion... Shouldn't the last-est style on the stylesheet be the priority unless something else has higher specificity?

[KevinH]

The Report does static analysis of only class selectors. Use the Inspector to see the live css being applied. So what does the Inspector show for the css being applied to that element?

[DiapDealer]

Might need to see a sample epub. I created a simple one from just the data given and both Reports and DevTools showed the "blockquote.write p.sig" selector being used.

Though as Kevin mentioned, the Sigil Reports figure is more for statistical analysis (this class IS being used) rather than for visible css prioritization.

[Turtle91]

Originally Posted by KevinH

The Report does static analysis of only class selectors. Use the Inspector to see the live css being applied. So what does the Inspector show for the css being applied to that element?

The inspector showed the "blockquote.write p.sig" selector...that's why it's confusing when the report says it is selecting the "div.quote p.sig".

Originally Posted by DiapDealer

Might need to see a sample epub. I created a simple one from just the data given and both Reports and DevTools showed the "blockquote.write p.sig" selector being used.

Though as Kevin mentioned, the Sigil Reports figure is more for statistical analysis (this class IS being used) rather than for visible css prioritation.

I closed Sigil and re-opened the same file and it showed the 'correct' selector being used....so, there is that....

[DiapDealer]

"Have you tried turning it off and on again?"