Count number of selectors in a css file

Question

is there an existing plugin/app/program/script/whatever that analyzes and counts the css selectors of a file? i want to check if the reason my css file is not working in IE is because my selector count is over 4095 (which im pretty sure is not)

thanks!

p.s. plus points if there's a haml/sass/compass solution

Brickwork

Did the number of selectors turn out to be the problem? If not, what was? I'm running into the same issue. All of a sudden IE9 and only IE9 is displaying my sites incorrectly... – Wedekind

Answer 1

The following snippet can be run in the Firebug console in Firefox to count the total number of CSS selectors (not just CSS rules) and check whether it reaches the limit of 4095 selectors per stylesheet:

var
  styleSheets = document.styleSheets,
  totalStyleSheets = styleSheets.length;

for (var j = 0; j < totalStyleSheets; j++){
  var
    styleSheet = styleSheets[j],
    rules = styleSheet.cssRules,
    totalRulesInStylesheet = rules.length,
    totalSelectorsInStylesheet = 0;

  for (var i = 0; i < totalRulesInStylesheet; i++) {
    if (rules[i].selectorText){
      totalSelectorsInStylesheet += rules[i].selectorText.split(',').length;
    }
  }
  console.log("Stylesheet: "+styleSheet.href);
  console.log("Total rules: "+totalRulesInStylesheet);
  console.log("Total selectors: "+totalSelectorsInStylesheet);
}

Artistic

Thanks for posting an answer! While a code snippet could answer the question it's still great to add some addition information around, like explain, etc .. – Deluxe

Ok. My english is very poor, but I will try ) – Artistic

@Artistic My Firebug says Error: The operation is insecure. "rules = styleSheet.cssRules,". Any ideas? FB 1.11.2 on FF 20.0.1 – Dewhurst

@RaphaelIDDL I think answer you need is here link – Artistic

Worked for me in Chrome console too. – Rescind

Answer 2

There is this bookmarklet that tells you the number of used CSS rules out of the total CSS rules (which you are interested in).

CSS Crunch

Conventionalism

Answer 3

My project, Bless CSS, could be what you're looking for. It will analyze files and split them at the optimum point based on the selector limit.

It's also built in to CodeKit.

Kitchenette

npm install -g bless then blessc count <path-to-file> – Redingote

Answer 4

This will do inline CSS...

var selectors = 0;

$('style').each(function() {

   var styles = $(this).html();

   // Strip comments
   styles = styles.replace(/\/\*.+?\*\//sg, ''); 

   var matches = styles.match(/\{[\s.]*\}/g);

   selectors += matches.length;

});

jsFiddle.

Misname

Answer 5

Search & replace "{" by "{" in your CSS file. Most editors wil tell how many replacements you’ve done…

Griffie

This will only count the number of rules, not the number of selectors. There can be multiple selectors per rule, e.g. h1, h2, h3 { margin: 0; } – Chyme

I think you should count the number of { plus the number of , (comma). As far as I can see, this would be a very simple detection mechanism. – Selfimprovement

Answer 6

Simple algorithm for counting the selectors if you want to do it as part of the build process or simply don't want to do it in JS:

Replace the texts between "{" and "}" with a "," and then calculate the number of ",". This will give you the number of selectors on the file.

Attu

Answer 7

a bit to late, but for anyone how's looking for a css selector counter: http://snippet.bevey.com/css/selectorCount.php it's very simple, and can work with more than one stylesheet, it even tells you when you hit the 4096 limit

Aplomb

Answer 8

Building on jetli13's answer 10 years later with no IE selector limits to be seen but styledcomponents and mega CSS in JS generator's in the future, I added the following

1. Warning over 1000 styles
2. Script works even if you have 3rd party external rules
3. Shows addition of styles per style tag or external stylesheets
4. Lets you expand individual CSS Ruleset's

Script - Copy and run in console

You can run it after a route change in a SPA application to see how many rules got added.

var
  styleSheets = document.styleSheets,
  totalStyleSheets = styleSheets.length,
  overAllDocumentRules =0;
try {
for (var j = 0; j < totalStyleSheets; j++){

    try{
  var
    styleSheet = styleSheets[j],
    rules = styleSheet.cssRules,
    totalRulesInStylesheet = rules.length,
    totalSelectorsInStylesheet = 0;

  for (var i = 0; i < totalRulesInStylesheet; i++) {
    if (rules[i].selectorText){
      totalSelectorsInStylesheet += rules[i].selectorText.split(',').length;
    }
  }
}
catch(err){
    console.warn("skipping>", styleSheet.href, err);
    console.warn(styleSheet)
}
if(totalRulesInStylesheet>1000) console.error("This stylesheet has over 1000 rules")
  console.log("Stylesheet: "+styleSheet.href);
  console.log(styleSheet)
  console.info("Total rules: "+totalRulesInStylesheet);
  overAllDocumentRules += totalRulesInStylesheet;
  console.warn("Total Document Rules > "+ overAllDocumentRules)
}
}
catch(err){
    console.warn("Error",err)

}

Cross Domain Stylesheet Rules a.k.a What is your 3rd party doing

If you need 3rd party styles in Safari web inspector do this:

Output

Agni