Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
alt
 
 
 
 
 
 
 
 
 
 

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"]
    }
  }
]

About

a simple CSS specificity calculator

Resources

License

Releases

No releases published

Packages

No packages published