1.0.0 • Published 2 years ago

specificity v1.0.0

Weekly downloads
2,321,938
License
MIT
Repository
github
Last release
2 years ago

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.

accessibility-layer@everything-registry/sub-chunk-2804@petergok/tempo-devtools@realrisman/svg2pdftempo-devtoolssvg-icon-toolboxsvg2pdf.jsspecificity-graphvisual-html@dimanech/cssstat-coredfeuk-frontenddfeuk-frontend-manualsort-specificitysubfonttyprodtheme-config-kit@alifd/fusion-theme-config128981semzubyu-svg2pdf.jszubtesttodayunfontuse-theme-editor@hanwenbo/web-editor@gui-one/react-settings-form@leoko/svg2pdf.js@leetcode/stylelint@michaelallenwarner/tailwind-grid-inner@mybricks/editors-pc-common@nodaomg/cssstats@emotion/jest@fabwcie/ckeditor5-preview@jackdbd/eleventy-plugin-text-to-speech@qwik-ui/utils@rai/react-components@sbaldwin24/stylelint-config@notesnook/clipper@petergok/tempo-devtools-test@opticss/simple-template@oriduk/ckeditor5-rebuild-oriduk@oriduk/ckeditor5-rebuild-musicanote@paperbits/amp@paperbits/emails@silver0542/directus-extension-cma-components-editormprdevopticssrc-editor-listreact-mirrorscss-codemodsposthtml-inline-cssposthtml-css-inlinepostcss-sort-style-rulespostcss-basscsspostcss-remove-mutationsrepaintreplace-importantpsyclone-studioresolve-cascadereact-round-divshadow-domgrumpkinimmutable-cssinline-cssinline-react-stylehtml-tuilongest-selectors@whinc/web-console@webbitjs/webbit@thundersolutions/access@yankovsky/subfontanalyze-cssassetgraphapim-developer-portalcomponent-styleschangedsvg2pdf.jsckeditor5-build-classic-ticketckeditor5-build-classic-v-editdelenitiveritatiscss-specificity-mapcss-sortcss-statisticscss-querycssstatsblessed-cssbase-editorbrowser-xec0lint-cssec0lint-styleec0lint-style-config-postcsseleventy-img-helperfont-tracerfusion-theme-configget-specified-style.js
1.0.0

2 years ago

1.0.0-beta

2 years ago

0.4.1

7 years ago

0.4.0

7 years ago

0.3.2

8 years ago

0.3.1

8 years ago

0.3.0

9 years ago

0.2.1

9 years ago

0.2.0

9 years ago

0.1.6

9 years ago

0.1.5

9 years ago

0.1.4

11 years ago

0.1.3

13 years ago

0.1.2

13 years ago

0.1.1

13 years ago

0.1.0

13 years ago