Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
specificity
Advanced tools
The 'specificity' npm package is used to calculate the specificity of CSS selectors. Specificity is a measure of how specific a CSS selector is, which determines which styles are applied when multiple selectors match the same element.
Calculate Specificity
This feature allows you to calculate the specificity of a given CSS selector. The result will be an array of objects, each containing the selector and its specificity score.
const specificity = require('specificity');
const result = specificity.calculate('body div #content .article');
console.log(result);
Compare Specificity
This feature allows you to compare the specificity of two CSS selectors. The comparison result will indicate which selector is more specific.
const specificity = require('specificity');
const result1 = specificity.calculate('body div #content .article');
const result2 = specificity.calculate('body div .article');
const comparison = specificity.compare(result1[0].specificityArray, result2[0].specificityArray);
console.log(comparison);
The 'css-specificity' package also calculates the specificity of CSS selectors. It provides similar functionality to 'specificity' but with a different API. It is useful for developers who need to analyze and compare CSS selector specificity.
The 'css-selector-parser' package parses CSS selectors and can be used to analyze their structure. While it does not directly calculate specificity, it can be used in conjunction with other tools to achieve similar results.
A JavaScript module for calculating and comparing the specificity of CSS selectors. The module is used on the Specificity Calculator website.
Specificity Calculator is built for CSS Selectors Level 3. Specificity Calculator isn’t a CSS validator. If you enter invalid selectors it will return incorrect results. For example, the negation pseudo-class may only take a simple selector as an argument. Using a psuedo-element or combinator as an argument for :not()
is invalid CSS so Specificity Calculator will return incorrect results.
The module is provided in two formats: an ECMAScript (ES) module in dist/specificity.mjs
, and a Universal Module Definition (UMD) in dist/specificity.js
. This enables support for the following runtime environments:
Browser
Node.js
<script type="module">
import { calculate } from './specificity/dist/specificity.mjs';
calculate('ul#nav li.active a');
</script>
Bundlers like Webpack and Rollup import from the module
field in package.json
, which is set to the ES module artefact, dist/specificity.mjs
.
import { calculate } from 'specificity';
calculate('ul#nav li.active a');
The UMD artefact, dist/specificity.js
, sets a global variable, SPECIFICITY
.
<script src="./specificity/dist/specificity.js"></script>
<script>
SPECIFICITY.calculate('ul#nav li.active a');
</script>
The main
field in package.json
has an extensionless value, dist/specificity
. This allows Node.js to use either the ES module, in dist/specificity.mjs
, or the CommonJS module, in dist/specificity.js
.
When Node.js is run with the --experimental-modules
flag or an ES module loader, it will use the ES module artefact.
import { calculate } from 'specificity';
calculate('ul#nav li.active a');
Otherwise, Node.js will use the UMD artefact, which contains a CommonJS module definition.
const { calculate } = require('specificity');
calculate('ul#nav li.active a');
The calculate
function returns an array containing a result object for each selector input. Each result object has the following properties:
selector
: the inputspecificity
: the result as a string e.g. 0,1,0,0
specificityArray
: the result as an array of numbers e.g. [0, 1, 0, 0]
parts
: array with details about each part of the selector that counts towards the specificitycalculate('ul#nav li.active a');
/*
[
{
selector: 'ul#nav li.active a',
specificity: '0,1,1,3',
specificityArray: [0, 1, 1, 3],
parts: [
{ selector: 'ul', type: 'c', index: 0, length: 2 },
{ selector: '#nav', type: 'a', index: 2, length: 4 },
{ selector: 'li', type: 'c', index: 5, length: 2 },
{ selector: '.active', type: 'b', index: 8, length: 7 },
{ selector: 'a', type: 'c', index: 13, length: 1 }
]
}
]
*/
You can use comma separation to pass in multiple selectors:
calculate('ul#nav li.active a, body.ie7 .col_3 h2 ~ h2');
/*
[
{
selector: 'ul#nav li.active a',
specificity: '0,1,1,3',
...
},
{
selector: 'body.ie7 .col_3 h2 ~ h2',
specificity: '0,0,2,3',
...
}
]
*/
Specificity Calculator also exports a compare
function. This function accepts two CSS selectors or specificity arrays, a
and b
.
-1
if a
has a lower specificity than b
1
if a
has a higher specificity than b
0
if a
has the same specificity than b
compare('div', '.active'); // -1
compare('#main', 'div'); // 1
compare('span', 'div'); // 0
compare('span', [0, 0, 0, 1]); // 0
compare('#main > div', [0, 1, 0, 1]); // 0
You can pass the compare
function to Array.prototype.sort
to sort an array of CSS selectors by specificity.
import { compare } from 'specificity';
['#main', 'p', '.active'].sort(compare); // ['p', '.active', '#main']
Run npm install specificity
to install the module locally, or npm install -g specificity
for global installation. Run specificity
without arguments to learn about its usage:
$ specificity
Usage: specificity <selector>
Computes specificity of a CSS selector.
Pass a selector as the first argument to get its specificity computed:
$ specificity "ul#nav li.active a"
0,1,1,3
To install dependencies, run: npm install
Then to test, run: npm test
FAQs
Calculate the specificity of a CSS selector
The npm package specificity receives a total of 1,785,659 weekly downloads. As such, specificity popularity was classified as popular.
We found that specificity demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.