marp-team / marpit

The skinny framework for creating slide deck from Markdown
https://marpit.marp.app/
MIT License
964 stars 46 forks source link

Improve `:root` selector to get better specificity #330

Closed yhatt closed 2 years ago

yhatt commented 2 years ago

247 has improved the specificity for :root selector, but actually that was not following the correct specificity.

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;
}
<html>
<body>
  <div>
    <p>green</p>
  </div>
</body>
</html>

In Marpit, this Markdown is having exactly same shape of above, but renders text in wrong color red.

<style>
:root p { /* 0-0-3*/
  color: green;
}

section div p { /* 0-0-3 */
  color: red;
}
</style>

<div>

green

</div>

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)

:root { /* 0-1-0 */ }
section:not(a) { /* 0-0-2:  */ )
:where(section):not([\20 root]) { /* 0-1-0:  */ )

:not([" root"]) pseudo-class will always match because HTML does not allow U+0020 SPACE in the attribute name.