Skip to content
a simple CSS specificity calculator
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
alt
.gitignore
LICENSE.md
README.md
index.html
specificity-calculator.js
specificity-calculator.min.js

README.md

CSS Specify Me

Demo page

A CSS specificity calculator. Accepts a CSS selector as an input and returns an object containing two properties: score, the selector's specificity score, and components, the pieces of the selector that contributed to each number in the score.

For more on how CSS specificity works, check out the speficication, my demo page, or this great calculator website that inspired my demo page.

Usage

Call specifyMe on a CSS selector:

specifyMe("h1 < a[title]:first-child");

Will return:

{
  score: [0,2,2],
  components: {
    ids: [],
    classesPseudoClassesAndAttributes: [":first-child", "[title]"],
    elementsAndPseudoElements: ["h1", "a"]
  }
}

Call specifyMe on an array of CSS selectors:

specifyMe(["h1 < a[title]:first-child", "h3::first-letter #ilike.potatoes"]);

Will return:

[
  {
    score: [0,2,2],
    components: {
      ids: [],
      classesPseudoClassesAndAttributes: [":first-child", "[title]"],
      elementsAndPseudoElements: ["h1", "a"]
    }
  }
  {
    score: [1,1,2],
    components: {
      ids: ["ilike"],
      classesPseudoClassesAndAttributes: [".potatoes"],
      elementsAndPseudoElements: ["::first-letter", "h3"]
    }
  }
]
You can’t perform that action at this time.