247 has improved the specificity for :root selector, but actually that was not following the correct specificity.
section selector has "0-0-1" specificity.
Original :root selector has "0-1-0" specificity, win against section.
A current replaced selector section:not(a) has "0-0-2" specificty. It will win against the simple section selector, but may lose against the complex selector.
For example, this CSS + HTML document will render text in green.
:root p { /* 0-1-1*/
color: green;
}
html div p { /* 0-0-3 */
color: red;
}
247 has improved the specificity for
:root
selector, but actually that was not following the correct specificity.section
selector has "0-0-1" specificity.:root
selector has "0-1-0" specificity, win againstsection
.section:not(a)
has "0-0-2" specificty. It will win against the simplesection
selector, but may lose against the complex selector.For example, this CSS + HTML document will render text in green.
In Marpit, this Markdown is having exactly same shape of above, but renders text in wrong color red.
Using
:where()
selector would be useful to match the specificity to:root
(0-1-0). https://polypane.app/css-specificity-calculator/#selector=%3Awhere(section)%3Anot(%5B%5C20%20root%5D):not([" root"])
pseudo-class will always match because HTML does not allow U+0020 SPACE in the attribute name.