Possible to backtrace applications of styles to a certain element or class?

**Davve** · Aug 31, 2007 03:24

Is there any application like Web Developer or similar that makes it possible to backtrace css applications? What I mean is:

Say I have this span.class, and it has been styled from different sheets, say sheet1.css, sheet2.css, and also from some inline styles:

HTML Code:

<link href="sheet1.css"/>
<link href="sheet2.css"/>

<body>
<span class="class" style="color: red"></span>
</body>

Code:

/* sheet1.css */
.class {color: blue;}

/* sheet2.css */
.class {color: yellow;}

Sometimes it'd be really nice to have some kind of tool of backtracing the styles; to know from where the different styles came, and in what order.

I am right now in the middle of a pretty big e-commerce web application and the CSS nest is getting rather nasty. Combined with different browser bugs, I've had some really tough problems.

**DaveWoods** · Aug 31, 2007 03:38

I've come across similar problems in the past when I've inherited other people's code and it's something that I never found an easy solution for.

Sometimes it may be easier just bite the bullet and combine stylesheet's to save time in the long run but more often than not I've just gone with it and tried to tidy things up as I run into a problem.

The dust me selectors plugin might be useful as it'll tell you which styles in which stylesheets aren't being used on that specific page

http://www.sitepoint.com/dustmeselectors/

But there's nothing more specific to what you're after that I've come across.

**AutisticCuckoo** · Aug 31, 2007 03:41

Opera's Developer Console and the Firefox add-ons DOM Inspector and Firebug can both do this. Point and click on an element and they will show you exactly which style rules affect the element and in which cascade order.

**Davve** · Aug 31, 2007 04:53

Thanks to the both of you! The tools really helped in tracking down my problem.

User Tag List

Thread: Possible to backtrace applications of styles to a certain element or class?

Thread Tools

Display

Possible to backtrace applications of styles to a certain element or class?

Bookmarks

Bookmarks

Posting Permissions