Find out all elements a given CSS class is applied to?

Question

Does Firebug / Web Developer Tools or any other extension have a function to show me all elements that have a given CSS class attached / applied?

So when I select a CSS class from the source (lets say, in Firebug), I would like to see all elements that have this class applied.

There's no such thing as a CSS class. Do you mean an HTML class or a CSS ruleset? — Quentin, Aug 29 '14 at 21:28
you write set of css properties enclosed in a flower brackets and name it, which is used in HTML element. Is that a CSS class, HTML class or CSS rule. I am sorry. Learning... — Kevin Rave, Aug 29 '14 at 21:35
You should probably read http://apps.workflower.fi/vocabs/css/en — Quentin, Aug 30 '14 at 21:22

score 4 · Accepted Answer · answered Aug 29 '14 at 21:30

4

Basically you may find elements matching a certain selector like this: document.querySelectorAll('.firstclass.secondclass')

answered Aug 29 '14 at 21:30

Gaute Løken

Yes, exactly. but this is jQuery thing? Is there a plugin that does this? – Kevin Rave Aug 29 '14 at 21:34
2

No, this is native. Follow the link, it shows you which browsers support it. (IE8 and newer, basically.) – Gaute Løken Aug 29 '14 at 21:35
I guess there is no better answer for this other than the one you specified. I can adjust with this for now. – Kevin Rave Sep 02 '14 at 16:29
This only find current page selectors.Not cross page tho. kinda useless if you already have firebug or chrome developer tool where you can just ctrl+f to find selectors – user2734550 Aug 13 '15 at 17:52
@user2734550 Nah, not so useless. If you have matches for what you are looking for in many places on your page. This will allow you to get them all nicely collected in the console rather than having to jump around the element viewer. It's just functionality. It's useful for some things, not so much for others. But just cause you don't find it useful doesn't mean it's not useful for anybody. What's with the negativity anyhow? Have a better answer, post one of your own instead of bashing others. – Gaute Løken Aug 14 '15 at 08:43

score 1 · Answer 2 · answered Aug 30 '14 at 23:16

There are two native DOM functions you can use to achieve this:

Both are supported by all major browsers for quite some time now.

Examples:

document.getElementsByClassName("firstClass secondClass")
document.querySelectorAll(".firstClass.secondClass")

2 Answers2