Getting the names of all classes / ids contained within a css file?

1. Include your css file into any html file.

2. In console execute the following code:

   Array.prototype.forEach.call(document.styleSheets[0].cssRules,function(a){console.log(a.selectorText)})

3. In the console will be the listing of all css tags used in your stylesheet.

You can iterate over document.styleSheets to get each style sheet, then iterate over the rules to find everything that matches a class or ID selector. The following is a simplistic approach that provides a general approach, the regular expressions to get the classes and IDs from the rules needs more work.

function getClassesAndIds() {
  var sheet, sheets = document.styleSheets;
  var rule, rules;
  var classes = [];
  var ids = [];
  var temp;

  for (var i=0, iLen=sheets.length; i<iLen; i++) {
    sheet = sheets[i];
    rules = sheet.rules;

    for (var j=0, jLen=rules.length; j<jLen; j++) {
      rule = rules[j];

      // Get the classes
      temp = rule.cssText.match(/\.\w+/g);

      if (temp) {
        classes.push.apply(classes, temp);
      }

      // Get the IDs
      temp = rule.cssText.match(/\#\w+/g);

      if (temp) {
        ids.push.apply(ids, temp);
      }
    }
   }
  // Return an array of the class and ID arrays
  return [classes,ids];

  // or as an object
  // return {classes:classes, ids:ids};
}

window.onload = function() {
  console.log(getClassesAndIds());
};

From memory there were some quirks in older IE around sheets and rules but right now it evades me…

See my working example here :)

https://codepen.io/pixelfast/pen/rNrovmj

<script>
function getEm() {
  url = document.getElementById("url").value;

  fetch(url)
    .then((response) => response.text())
    .then((data) => {
      var cssText = data;

      var classRegex = /\.([\w-]+)/g;
      var idRegex = /#([\w-]+)/g;

      var classes = [];
      var ids = [];

      var match;
      while ((match = classRegex.exec(cssText)) !== null) {
        classes.push(match[1]);
      }

      while ((match = idRegex.exec(cssText)) !== null) {
        ids.push(match[1]);
      }

      console.log("Classes: " + classes);
      console.log("IDs: " + ids);

      document.getElementById("classes").innerHTML = classes + "<hr>";
      document.getElementById("ids").innerHTML = ids;
    });
}
</script>


<!-- HTML -->

<input style="width:400px" type="text" id="url" value="https://getbootstrap.com/docs/5.3/assets/css/docs.css">
<button onclick="getEm()">Get Em</button>
<hr>
<div id="classes"></div>
<div id="ids"></div>

In my case, i need all class names (there are selectors which is start with ".icon-" ) in icons.css for listing all defined font icons.

const {cssRules} = Object.values(document.styleSheets)
      .find(sheet =>
        Object.values(sheet.cssRules).find(rule =>
          (rule.selectorText || '').match(/^.icon/)
        )
      ) || {cssRules: {}}

console.log(Object.values(cssRules).map(i => i.selectorText))