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?

Opera Dragonfly shows the what is overridden and where it is, very useful — Andrew Jackman, Dec 25 '11 at 18:12
DevTools for chrome and Firebug for Firebox both show all applicable CSS rules, their origins, and which ones have been overridden. — Marc B, Dec 25 '11 at 18:15

score 4 · Answer 1 · answered Dec 25 '11 at 18:50

4

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:

enter image description here

answered Dec 25 '11 at 18:50

Bojangles

99,427
50
170
208

@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? – surfmuggle Oct 13 '17 at 09:07

score 0 · Answer 2 · answered Jan 16 '20 at 08:57

0

Would be great to see something like this in Chrome:

answered Jan 16 '20 at 08:57

SausageFingers

1,796
5
31
52

score -1 · Accepted Answer · answered Dec 25 '11 at 18:27

-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

answered Dec 25 '11 at 18:27

Fabián Heredia Montiel

1,687
1
16
30

2

Perhaps give a link to [Firebug](http://getfirebug.com/) for those using Firefox too? – Bojangles Dec 25 '11 at 18:32
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. – Fabián Heredia Montiel Dec 25 '11 at 18:34
the last link is broken – activedecay Jan 28 '16 at 22:30
https://web.archive.org/web/20120314221731/http://code.google.com/intl/EN/chrome/devtools/docs/videos.html – Fabián Heredia Montiel Jan 29 '16 at 20:34
5

This answer is very unspecific. – Michael Schmid Mar 29 '17 at 14:56
4

How does one "Use Chrome Inspector" to see the CSS specificity, specifically? – qJake Apr 03 '17 at 18:21

Tool to see CSS specificity

3 Answers3

Linked