2

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

Francesco Rogo
  • 167
  • 2
  • 8
  • 1
    Does this answer your question? [How to get a list of all loaded CSS classes in Google Chrome?](https://stackoverflow.com/questions/31915714/how-to-get-a-list-of-all-loaded-css-classes-in-google-chrome) – QmlnR2F5 Dec 03 '19 at 17:37
  • 6
    Using ES6: `[].concat(...[...document.querySelectorAll('*')].map(e=>[...e.classList])).filter((d,i,a)=>a.indexOf(d)==i).sort()` – Adrift Dec 03 '19 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 Dec 04 '19 at 08:44
  • @JasonYaraghi's script is perfection for what I needed! – Digger Mar 14 '21 at 15:15

5 Answers5

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:

Henry Ecker
  • 34,399
  • 18
  • 41
  • 57
Zygmunt Wychowaniec
  • 51
  • 1
  • 3
  • Property `sheet` could be null resulting in a type error. You should handle that case. – Lucas David Ferrero Nov 11 '21 at 14:14
  • Hi Zygmunt, unfortunatly i had some problems with your script because it appears that 'rules' property is not accessible from javascript due to browsers cors policies. But i'm going to accept your answer because your suggestion on the style filter is neat and it works. Thank You – Francesco Rogo Nov 11 '21 at 16:24
  • try set crossorigin="anonymous" on link elements. Like so. Let me know if it works for you. – Zygmunt Wychowaniec Nov 11 '21 at 20:21
2

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

Konkret
  • 991
  • 9
  • 14
  • 1
    This is a step in the right direction as u can actually deduct the list from the results of this call. I'm going to dig deeper on this, thank you very much for this information. – Francesco Rogo Dec 17 '20 at 13:46
2

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())
ryenus
  • 15,711
  • 5
  • 56
  • 63
1

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.

  • 1
    Still, in chrome dev tools you get all classes and styles linked to that single element you select, what i'm wondering if it is possible to have is the complete css class list from every stylesheet loaded on the page – Francesco Rogo Dec 04 '19 at 08:49
  • Yeah I got you, but thats why the best I can say is 'sort of'. You can see them one file at a time and compile them yourself but, I'm not sure it how do it in one statement or view without writing some special javascript to compile them all for you. –  Dec 04 '19 at 16:54
0

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())
Alex Go
  • 41
  • 4