2

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

Example:

<div class="test-node">
  <strong>Test</strong>
</div>

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 http://jsfiddle.net/yyf9v/).

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 element.style rule (attribute style basically) and the Matched CSS Rules... I need this!

Liam McInroy
  • 4,339
  • 5
  • 32
  • 53
David Rodrigues
  • 12,041
  • 16
  • 62
  • 90
  • 1
    "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`." This is completely wrong; a `strong` element can **never** be affected by a rule that selects a `div`, because a `strong` is not a `div`! – BoltClock May 13 '12 at 23:26
  • Take a look please: http://jsfiddle.net/yyf9v/ – David Rodrigues May 13 '12 at 23:45
  • That is inheritance; your `em` has no defined `color` rules so the default is to inherit from the `div`. It does not mean that the `div` selectors affect the `em`. – BoltClock May 13 '12 at 23:46
  • 1
    @DavidRodrigues Are you interested in *matched* rules only, or in both matched and *inherited* rules? – Šime Vidas May 13 '12 at 23:47
  • @ŠimeVidas both, but priority to matched rules – David Rodrigues May 13 '12 at 23:48
  • 1
    Read here: http://stackoverflow.com/q/2952667/425275 – Šime Vidas May 13 '12 at 23:55

1 Answers1

0

why dont you try firebug on firefox ... it is like the inspector in google chrome...

it shows all CSS classes applied for a specific node and what does it inherit and what is overriden.

you can find it here

http://getfirebug.com/

and here

https://addons.mozilla.org/en-US/firefox/addon/firebug/

iosMentalist
  • 3,066
  • 1
  • 30
  • 40