specificity

What is specificity?

The 'specificity' npm package is used to calculate the specificity of CSS selectors. Specificity is a measure of how specific a CSS selector is, which determines which styles are applied when multiple selectors match the same element.

What are specificity's main functionalities?

Calculate Specificity

This feature allows you to calculate the specificity of a given CSS selector. The result will be an array of objects, each containing the selector and its specificity score.

const specificity = require('specificity');
const result = specificity.calculate('body div #content .article');
console.log(result);

Compare Specificity

This feature allows you to compare the specificity of two CSS selectors. The comparison result will indicate which selector is more specific.

const specificity = require('specificity');
const result1 = specificity.calculate('body div #content .article');
const result2 = specificity.calculate('body div .article');
const comparison = specificity.compare(result1[0].specificityArray, result2[0].specificityArray);
console.log(comparison);

Other packages similar to specificity

css-specificity

The 'css-specificity' package also calculates the specificity of CSS selectors. It provides similar functionality to 'specificity' but with a different API. It is useful for developers who need to analyze and compare CSS selector specificity.

css-selector-parser

The 'css-selector-parser' package parses CSS selectors and can be used to analyze their structure. While it does not directly calculate specificity, it can be used in conjunction with other tools to achieve similar results.

README

Specificity Calculator

A JavaScript module for calculating and comparing the specificity of CSS selectors. The module is used on the Specificity Calculator website.

Note that version 1 is a complete re-write with support for CSS Selectors Level 4, and has a different API than earlier versions.

calculate(selector)

Parameters

• selector: string - should be a valid CSS selector

Returns

A Specificity object with a type of Record<"A" | "B" | "C", number>.

Examples

calculate("#id");
{
  A: 1,
  B: 0,
  C: 0
}

calculate(".classname");
{
  A: 0,
  B: 1,
  C: 0
}

calculate("element");
{
  A: 0,
  B: 0,
  C: 1
}

calculate('ul#nav li.active a');
{
  A: 1,
  B: 1,
  C: 3
}

compare(a, b)

Parameters

• a: Specificity object with a type of Record<"A" | "B" | "C", number>
• b: Specificity object with a type of Record<"A" | "B" | "C", number>

Returns

Returns a positive number if a has a higher specificity than b Returns a negative number if a has a lower specificity than b Returns 0 if a has the same specificity than b

Examples

[
  "element",
  ".classname",
  "#id",
]
  .map(calculate)
  .sort(compare);

[ { A: 0, B: 0, C: 1 }, { A: 0, B: 1, C: 0 }, { A: 1, B: 0, C: 0 } ]

compareDesc(a, b)

Same as compare but returns the opposite value, for use in sorting specificity objects with the highest specificity first.