Home/ Questions/Q 6381683
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T02:25:36+00:00

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

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.)

    • 0