css-what
Advanced tools
Package description
The css-what npm package is a CSS selector parser that translates CSS selectors into an easy-to-process format. It is often used in server-side applications or tools that need to interpret and manipulate CSS selectors programmatically.
Parsing CSS Selectors
This feature allows you to parse a CSS selector string into a structured format. The code sample demonstrates how to parse a complex CSS selector into an array of objects representing each part of the selector.
const parse = require('css-what');
const selector = 'div > .className[attr=value]';
const parsed = parse(selector);
console.log(parsed);css-select is a CSS selector engine that uses css-what under the hood to parse selectors. It extends the parsing capabilities with selecting elements from a DOM tree, making it more suitable for tasks that involve DOM manipulation.
cheerio is a fast, flexible, and lean implementation of core jQuery designed specifically for the server. It uses css-what indirectly through css-select for parsing CSS selectors. Cheerio provides a full jQuery-like API for traversing and manipulating the DOM.
jsdom is a pure-JavaScript implementation of many web standards, notably the DOM and HTML standards. It allows you to interact with a DOM tree using standard DOM APIs. While jsdom does not use css-what directly, it provides similar functionality in terms of interpreting and applying CSS selectors to a DOM structure.
Readme
a CSS selector parser
require('css-what')('foo[bar]:baz')
~> [ [ { type: 'tag', name: 'foo' },
{ type: 'attribute',
name: 'bar',
action: 'exists',
value: '',
ignoreCase: false },
{ type: 'pseudo',
name: 'baz',
data: null } ] ]
CSSwhat(selector, options) - Parses str, with the passed options.
The function returns a two-dimensional array. The first array represents selectors separated by commas (eg. sub1, sub2), the second contains the relevant tokens for that selector. Possible token types are:
| name | attributes | example | output |
|---|---|---|---|
tag | name | div | { type: 'tag', name: 'div' } |
universal | - | * | { type: 'universal' } |
pseudo | name, data | :name(data) | { type: 'pseudo', name: 'name', data: 'data' } |
pseudo | name, data | :name | { type: 'pseudo', name: 'name', data: null } |
pseudo-element | name | ::name | { type: 'pseudo-element', name: 'name' } |
attribute | name, action, value, ignoreCase | [attr] | { type: 'attribute', name: 'attr', action: 'exists', value: '', ignoreCase: false } |
attribute | name, action, value, ignoreCase | [attr=val] | { type: 'attribute', name: 'attr', action: 'equals', value: 'val', ignoreCase: false } |
attribute | name, action, value, ignoreCase | [attr^=val] | { type: 'attribute', name: 'attr', action: 'start', value: 'val', ignoreCase: false } |
attribute | name, action, value, ignoreCase | [attr$=val] | { type: 'attribute', name: 'attr', action: 'end', value: 'val', ignoreCase: false } |
child | - | > | { type: 'child' } |
parent | - | < | { type: 'parent' } |
sibling | - | ~ | { type: 'sibling' } |
adjacent | - | + | { type: 'adjacent' } |
descendant | - | { type: 'descendant' } |
Options:
xmlMode: When enabled, tag names will be case-sensitive (meaning they won't be lowercased).License: BSD-2-Clause
FAQs
a CSS selector parser
We found that css-what 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
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.
Security News
Socket is joining forces with CISA and other industry leaders at the RSA Conference to sign the Secure by Design pledge, committing to uphold the highest security standards in our products.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.