I was wondering if there is an easy way to list all available css classes loaded withing a single html page in javascript or through the developer console in chrome or firefox.

Thank you

I was wondering if there is an easy way to list all available css classes loaded withing a single html page in javascript or through the developer console in chrome or firefox.

Thank you

• javascript
• html
• css
• google-chrome
• firefox

• 1 Does this answer your question? How to get a list of all loaded CSS classes in Google Chrome? – QmlnR2F5 Commented Dec 3, 2019 at 17:37
• 6 Using ES6: [].concat(...[...document.querySelectorAll('*')].map(e=>[...e.classList])).filter((d,i,a)=>a.indexOf(d)==i).sort() – Adrift Commented Dec 3, 2019 at 17:45
• That script prints all classes actually applied to any element in the page, it doesn't list classes that have been defined but not used or removed – Francesco Rogo Commented Dec 4, 2019 at 8:44
• @JasonYaraghi's script is perfection for what I needed! – Digger Commented Mar 14, 2021 at 15:15

5 Answers 5

A bit late but ...

  for (let link of document.querySelectorAll("link, style")) {
    try {
      if (!link.sheet) {
        console.warn("Warning:", "Property 'sheet' is not set on element", link)
      } else
        for (let rule of link.sheet.rules) {
          console.log(rule.selectorText)
        };
    } catch (e) {
      console.warn("Warning:", e.message, ". Try set crossorigin='anonymous' on element", link)
    }
  };

or in the Chrome DevTool window (F12), find the "Elements", then "Styles", tab. On the right side of the "filter" text-box there is a ".cls" option. Click it and an "add new class" input should appear. Focus that input and hit Ctrl + Space. A pick list of all class styles in the current opened document should appear.

It looks something like this:

There's no easy way to find all available css classes, but we can find all those being used:

One Liner

[...[...$$("[class]")].reduce((s, e) =>
  (e.classList.forEach(c => s.add(c)), s), new Set())].sort()

Though wrapped just for readability :-)

Explanation

There're two shorthands used in the above one liner:

1. $$ is a shorthand for document.querySelectorAll
2. [...iterable] is for Array.from(iterable), see the spread syntax (...)

And here's the expanded code:

Array.from(                                 // 4
  Array.from(                               // 2 
      document.querySelectorAll("[class]")  // 1
  ).reduce(                                 // 3
    (s, e) => (e.classList.forEach(c => s.add(c)), s), 
    new Set()
  )
).sort()                                    // 5

1. find all HTML elements with the class attribute, see attribute selectors
2. use Array.from to turn the NodeList from step 1 into an Array
3. use Array.reduce to collect the CSS classes into a Set, to remove duplicates
4. turn the result Set from step 3 back to an Array, for sorting
5. sort the result

Additionally, we can use console.table() to show the result nicely:

console.table([...[...$$("[class]")].reduce((s, e) =>
  (e.classList.forEach(c => s.add(c)), s), new Set())].sort())

Yes, basically you would fire up the console and type:

document.querySelectorAll("*[class]");

The querySelectorAll method works just like CSS attribute selectors in this case. Read more about it in MDN https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll

Sort of, you can do it per element easily, inside of Chrome Dev tools use the elements tab to select elements, and then go to the "Computed" tab which shows everything attached to each element.

If it was a big page with lots of elements and you needed to look at all of the CSS, I would just go to the elements and look into the head or header html element and go directly to the files. Depending on the architecture of the page some devs put it in the footer element as well as some inline.

You can also CTRL+F in chrome dev tools and write "stylesheet" which should pull up all of the pages attached sheets of CSS.

Here is how Im currently doing this:

function getAllClasses() {
  const classSet = new Set();
  const allElements = document.getElementsByTagName("*");
  for (let i = 0, n = allElements.length; i < n; i++) {
    allElements[i].classList.forEach(cls => classSet.add(cls))
  }
  return Array.from(classSet);
}
console.log(getAllClasses())