Basic info:
- Node.js version: 16.13.0
- jsdom version: 19.0.0
- Use any styles, that depend on specificy
<style>
.parent p { color: black; } // this should take precedense, since it's more specific, according to CSS
p { color: red; }
</style>
- Use them in HTML
The CSS specificity rules are described: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Minimal reproduction case
var JSDOM = require("jsdom").JSDOM;
const dom = new JSDOM(`<!DOCTYPE html>
<style>
div.parent p { color: black; }
p { color: red; }
</style>
<div class="parent">
<p>Hi</p>
</div>
`);
const style = dom.window.getComputedStyle(dom.window.document.querySelector("p"));
console.log(style);How does similar code behave in browsers?
In every browser, getComputedStyle() returns color: black, in JSDOM it's color: red.
Basic info:
The CSS specificity rules are described: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Minimal reproduction case
How does similar code behave in browsers?
In every browser,
getComputedStyle()returnscolor: black, in JSDOM it'scolor: red.