Tool to see CSS specificity

Question

Does anyone know if there is some kind of tool to see/pick the best CSS selector based on CSS specificity to target a particular div?

I know what has higher specificity, but sometimes when working on other people projects where they have deeply nested selectors in there CSS,it is hard to find a way to override there stuff.

I know in Google chromes dev tool/firebug it shows a lot of information at the bottom when viewing the page source, is that something that should be used for this or is there other methods?

Aeriform

Opera Dragonfly shows the what is overridden and where it is, very useful – Killdeer

DevTools for chrome and Firebug for Firebox both show all applicable CSS rules, their origins, and which ones have been overridden. – Torsibility

Answer 1

Use Chrome Inspector.

DevFest 2010 - Chrome Developer Tools - In Depth

Google Chrome Developer Tools: 12 Tricks to Develop Quicker

Google's Page on Dev Tools

Eleanor

Perhaps give a link to Firebug for those using Firefox too? – Cheshire

Well, I don't use Firefox since 3.5 So I am not sure what to look for. Feel free to add your answer though. – Eberta

the last link is broken – Upstairs

web.archive.org/web/20120314221731/http://code.google.com/intl/… – Eberta

This answer is very unspecific. – Pitapat

How does one "Use Chrome Inspector" to see the CSS specificity, specifically? – Shier

Answer 2

Since it's very widely used, no one's suggested it and fabianhjr suggested I do so, I'm going to recommend Firebug for Firefox. It's similar to Chrome's inspector, and allows you to see the CSS given to an element, as well as any overridden properties:

Cheshire

@Bojangels the domain qtax.se has only a image with the information it has been seized. Could you elaborate why you added the link and how this belongs to this thread? – Surplice

Answer 3

Would be great to see something like this in Chrome:

Falcate