First css selector is applied when selectors have same name

#26887

With css

<br /> <style rel="stylesheet" type="text/css"><br /> <br /> .element p.text<br /> {<br /> color:#0000ff;<br /> font-size:20px;<br /> }<br /> <br /> </style><br /> <br /> <style rel="stylesheet" type="text/css"><br /> <br /> .element.etext p<br /> {<br /> color:#ff0000;<br /> font-size: 10px;<br /> }<br /> <br /> .element p.text<br /> {<br /> font-size:50px;<br /> color:#00ff00;<br /> font-family:Courier, monospace;<br /> }<br /> <br /> </style><br />

and html

<br /> <div class="element compatibility etext full left text " ><br /> <p class="text"><br /> What should be my font size?<br /> </p><br /> </div><br />

Browser shows big green text but pdf output has small red. If I remove the first .element p.text selector then output pdf has also green big text.

Is the rest of the selectors just skipped if there is more than one selector of same name? Or why the settings of the later one doesn’t get applied?

PD4ML 3.8.0 fx 4 in use but I have also tried with 3.8.5 fx 2 demo.

Demo html and result pdf attached in zip.

Thanks in advance,
Kalle

#29431

We identified a problem with a precedence of selectors with identical weight (aka CSS Specificity). The issue is going to be fixed with forthcoming maintenance release.

#29432

Thank you.

[Author]

Posts