'Is there a way to list all available css classes for a web page?

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

javascripthtmlcssgoogle-chromefirefox


Solution 1:[1]

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:

Solution 2:[2]

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.

Solution 3:[3]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Henry Ecker
Solution 2
Solution 3 Konkret

Related Questions