@csstools/selector-specificity

Selector Specificity

Usage

Add Selector Specificity to your project:

npm install @csstools/selector-specificity --save-dev

import parser from 'postcss-selector-parser';
import { selectorSpecificity } from '@csstools/selector-specificity';

const selectorAST = parser().astSync('#foo:has(> .foo)');
const specificity = selectorSpecificity(selectorAST);

console.log(specificity.a); // 1
console.log(specificity.b); // 1
console.log(specificity.c); // 0

selectorSpecificity takes a single selector, not a list of selectors (not : a, b, c). To compare or otherwise manipulate lists of selectors you need to call selectorSpecificity on each part.

Comparing

The package exports a utility function to compare two specificities.

import { selectorSpecificity, compare } from '@csstools/selector-specificity';

const s1 = selectorSpecificity(ast1);
const s2 = selectorSpecificity(ast2);
compare(s1, s2); // -1 | 0 | 1

• if s1 < s2 then compare(s1, s2) returns a negative number (< 0)
• if s1 > s2 then compare(s1, s2) returns a positive number (> 0)
• if s1 === s2 then compare(s1, s2) returns zero (=== 0)

Prior Art

• keeganstreet/specificity
• bramus/specificity

For CSSTools we always use postcss-selector-parser and want to calculate specificity from this AST.

Similar packages

Other packages similar to @csstools/selector-specificity

specificity

The 'specificity' package is another tool for calculating CSS selector specificity. It provides similar functionality to @csstools/selector-specificity, allowing developers to parse and compare the specificity of CSS selectors. However, it may have a different API and additional features.

css-specificity-calculator

The 'css-specificity-calculator' package offers functionality to calculate the specificity of CSS selectors. It is similar to @csstools/selector-specificity but may have a different approach to handling specificity calculations and comparisons.