Get element from which CSS rule is being inherited

Question

In jQuery, we can easily get the CSS value for a given element with the css method:

$('#myElement').css('line-height'); // e.g. '16px'

Now, since this CSS value might have been inherited from a parent element, is there any way to know which element has this rule applied to it?

For example, let's say I have the following HTML:

<div class="parent">
    <div id="myElement"></div>
</div>

and the following CSS:

.parent {
    line-height: 20px;
}

Calling the css method on #myElement will return 20px, but it will not indicate that it was inherited from .parent.

I know I can just fire up Web Inspector/Dev Tools/Firebug, but I want to get it programmatically.

Is this at all possible?

This will help you check out the post http://stackoverflow.com/questions/5000108/how-can-i-tell-if-a-particular-css-property-is-inherited-with-jquery — pranay vadel, Aug 30 '11 at 21:00
@pranay vadel: That'll tell me *whether* it was inherited, not where from... — Joseph Silber, Aug 30 '11 at 21:05
Maybe you should have a look at the [code of Firebug](http://fbug.googlecode.com/svn/trunk/content/firebug/), to see how it's done there. Firebug is written in JavaScript… — feeela, Aug 30 '11 at 21:15
Looking at the Firebug source is a good suggestion, but the code is certainly non-trivial. I also worry that it may be Firefox-specific or (worse) rely on native APIs that are only available to XUL apps (like Firebug). That said, I got as far as tracking it down to the "overridden" logic in the getElementRules() function in css.js (http://goo.gl/ahF90) but don't have time to delve further. — broofa, Sep 07 '11 at 14:16

score 1 · Accepted Answer · answered Aug 30 '11 at 22:09

1

Walk up the parentElement chain checking the css() value of each element. The first element with a parent().css() value that's different is (probably) the element being targeted by the CSS rule selector.

See this fiddle for an example: http://jsfiddle.net/broofa/VPWV9/2/ (See the console.log output)

(Note: there are almost surely complex cases where this won't work as expected but for the case as described, it works.)

answered Aug 30 '11 at 22:09

broofa

37,461
11
73
73

1

What if the child has the same style applied as the parent: `.parent, .child { color: red }`? Your code would claim that the value was inherited!! – Joseph Silber Aug 30 '11 at 22:12
As I said, there are complex cases where this code won't work. :) I suppose there might be a solution based on analysis of the document's stylesheets, (e.g. pull out the selectors for each CSS rule, use jquery to examine which elements are targeted by each rule, etc.), but I'm pretty sure that such a solution would be painfully complex, computationally expensive, and unlikely to be much more reliable. – broofa Aug 30 '11 at 22:39
Well, I guess I'll just have to settle for what I get :( – Joseph Silber Sep 02 '11 at 02:32

score 1 · Answer 2 · edited Jan 03 '12 at 14:50

I have a similar solution to broofa's. It also has the same problem though. Here's the fiddle:

http://jsfiddle.net/2w3kt/

$.fn.getStyleParent = function(property)
{
    var $source = this.get(0), // only do for 1st element :P
        srcVal = $source.css(property),
        $element = null;

    $(this).parents().each(function()
    {
        var $this = $(this);
        if( $this.css(property) == srcVal )
            element = $this;
        else
            return false; // stops the loop
    });

    return $element;
}

Get element from which CSS rule is being inherited

2 Answers2

Linked