Selector Specificity
Usage
Add Selector Specificity to your project:
npm install postcss @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);
console.log(specificity.b);
console.log(specificity.c);
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.
Prior Art
For CSSTools we always use postcss-selector-parser
and want to calculate specificity from this AST.