Search code examples
javascripthtmlcssgoogle-chrome-devtoolschromium-embedded

window.getMatchedCSSRules for all rules including its pseudo-elements and pseudo-classes rules


I am trying to get matched CSS rules of an element, using chrome's window.getMatchedCSSRules method. But this method does not gives me rules of its pseudo elements and pseudo classes. But by passing pseudo class/element name as the second argument to the method, individually it returns rules.

window.getMatchedCSSRules(btn, "before")
window.getMatchedCSSRules(btn, "after")
window.getMatchedCSSRules( progressEle, "-webkit-progress-value")

But is there a way to get all css rules including all of its pseudo class/element rules, without passing a particular pseudo element/class name as argument?


Solution

  • You can't target pseudo elements with javascript or jquery as they are not (yet) dom elements.

    However, if you want to manipulate css elements through js - you might be able to achieve a similar effect with https://github.com/Box9/jss

    Hope that helps