How to detect CSS inheritance source?

Question

So far, I can only tell if a property is inherited or not, but I need to know the source of inheritance, (for ex, which CSS file caused the final value ?) is this possible ?

Is there a handy tool for this ?

EDIT

Here is what I get in chrome Computed Style (show inheritance) See the direction property, there is no info about its inheritance source

Solution 1

You can do this job very easily by using Firebug in Firefox or Chrome's Developer Tools.

Chrome Developer Tools

Like image shows below.

For more information check Chrome Developer Tools: Element Styles Here

In Firebug

Like image shows below.

For more information check CSS Development Here

You can install Fire Bug From Here

Update 1:

You can find it by just clicking Show Inherited check box on Chrome's computed style panel likes below.

Update 2:

In Firebug, you just click inherited element what I showed below image.Then It will guide you to the relevant Inherited element's location.

P.S. - Same can do by using chrome Tool.

Solution 2

The cascading nature of CSS makes the Styles browser in the Elements Tab very useful, you can see the individual styles and where they come from, you can also see the final set of styles after it is computed and applied to the element.

EDIT

You can refer a property and its source from computed style panel

Reference

• Chrome Dev Tools.

Comments

[simo]

Thanks, although Firefox Fire Bug Tool is awesome, I couldn't find the property I am looking for listed, that is direction, but, its listed in chrome Computed Style

[simo]

its hard to find it this way, I need to simply search for the property name to find it and find its inheritance source, this way you've shown above will force me look through all 'Inherited from' tabs to see if my property listed or not .. sadly there is no search option, its only available for the page html source

[Sampath]

@SamirSabri check my update 1.Inside the chrome also you can do this.

[Sudarshan]

@SamirSabri: You can relate a property and its value using computed style panel no need to do a search operation, check my edit in answer

[Sampath]

@SamirSabri on chrome also you can do same thing just by clicking "Inherited From's Link".Same as firebug.It will direct you to relevant location.

[simo]

I've got your point, so, it seems that I am viewing the default value, which is not inherited .. please see discussion above

[simo]

Thanks Sampath for clarification, I found that what I see in the computed style is the default values which are not inherited ..