specificity
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

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.

Install

DownloadsWeekly Downloads

2,177,811

Version

1.0.0

License

MIT

Unpacked Size

34.1 kB

Total Files

28

Last publish

Collaborators

  • keeganstreet