JSPM

  • Created
  • Published
  • Downloads 14869575
  • Score
    100M100P100Q249651F
  • License MIT

Calculate specificity of a CSS Selector

Package Exports

  • @bramus/specificity
  • @bramus/specificity/dist/index.cjs.js
  • @bramus/specificity/dist/index.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@bramus/specificity) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Calculate CSS Specificity

Specificity

Calculate the Specificity of a given CSS Selector.

Supports Selectors Level 4, including those special cases :is(), :where(), :not(), etc.

Installation

npm i @bramus/specificity

Usage / Example

This library comes as an ES Module and exposes a calculate function which calculates the specificity of a given CSS selector.

import { calculate } from '@bramus/specificity';

const specificity = calculate('.foo :is(.bar, #baz)');
// ~> { a: 1, b: 1, c: 0 }

A CJS-compatible build is also included.

License

@bramus/specificity is released under the MIT public license. See the enclosed LICENSE for details.

Acknowledgements

The idea to create this package was sparked by the wonderful Specificity Calculator created by Kilian Valkhof / Polypane, a highly educational tool that not only calculates the specificity, but also explains which parts are responsible for it.

The heavy lifting of doing the actual parsing is done by CSSTree.