Monday, May 14, 2012

How to get the CSS rules compatible with a node?

It's possible to know what CSS rules is applied to a specific node?


<div class="test-node">

And the CSS rules:

div           { color: blue }
div:hover { color: green; }
.test-node { font-weight: bold; }

div > strong { color: red; }

So, the div node is affected by two rules div and .test-node and the div:hover if hover node only. The strong node is affected by div and div:hover rule, because it is inner a div, but the color property is overwrited by your own rule div > strong (example

Basically I need discovery how I can do the samething that Chrome Inspector does in javascript. If you use Chrome, go to Inspector (CTRL + Shift + J, Elements and select a node). You will se a Styles tab, that show rule (attribute style basically) and the Matched CSS Rules... I need this!

No comments:

Post a Comment