title: Is it possible to find CSS rules from an HTML node via JavaScript?
body: <p>I want to get an element in the DOM and then lookup what rules in my CSS file(s) are contributing to it's appearance. Similar to what firebug or webkits inspector does. Is there a way to do this in JavaScript?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>I should provide a constraint and a specific example - I am only interested in achieving this in webkit based browsers so cross-browser difficulties are not so much an issue. What I am specifically trying to achieve is this. Let's say I have a stylesheet as follows:</p>
  
  <pre><code>     div {
          background: #f0f0f0;
       }
  
       .example {
          padding: 10px;
       }
  </code></pre>
  
  <p>And then let's say some html code like this:</p>
  
  <pre><code>  &lt;div id="test" class="example"&gt;
       &lt;hgroup&gt;
          &lt;h1&gt;Test&lt;/h1&gt;
          &lt;h2&gt;A sample file to play with.&lt;/h2&gt;
       &lt;/hgroup&gt;
       &lt;ul class="sample"&gt;
          &lt;li id="item_1"&gt;Item 1&lt;/li&gt;
          &lt;li id="item_2"&gt;Item 2&lt;/li&gt;
       &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>So then in javascript I want to be able to have a function that can find the selectors from the CSS that are styling the object:</p>
  
  <pre><code>get_selectors_for(document.getElementById('test'))
  // should return:
  // ['div','.example']
  </code></pre>
  
  <p>How complicated is it to reverse query selectors knowing we only need to worry about webkit as opposed to all browsers?</p>