A CSS selector parser.
import * as CSSwhat from "css-what";
CSSwhat.parse("foo[bar]:baz")
~> [
[
{ type: "tag", name: "foo" },
{
type: "attribute",
name: "bar",
action: "exists",
value: "",
ignoreCase: null
},
{ type: "pseudo", name: "baz", data: null }
]
]
CSSwhat.parse(selector) - Parses selector.
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 | properties | 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' } | |
column-combinator | - | || | { type: 'column-combinator' } |
CSSwhat.stringify(selector) - Turns selector back into a string.
License: BSD-2-Clause
To report a security vulnerability, please use the Tidelift security contact. Tidelift will coordinate the fix and disclosure.
css-what for enterpriseAvailable as part of the Tidelift Subscription
The maintainers of css-what and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use. Learn more.
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.
FAQs
a CSS selector parser
The npm package css-what receives a total of 30,315,978 weekly downloads. As such, css-what popularity was classified as popular.
We found that css-what demonstrated a healthy version release cadence and project activity because the last version was released less than 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
Socket CTO Ahmad Nassri shares practical AI coding techniques, tools, and team workflows, plus what still feels noisy and why shipping remains human-led.
Research
/Security News
A five-month operation turned 27 npm packages into durable hosting for browser-run lures that mimic document-sharing portals and Microsoft sign-in, targeting 25 organizations across manufacturing, industrial automation, plastics, and healthcare for credential theft.
Research
Fake “Phantom Shuttle” VPN Chrome extensions (active since 2017) hijack proxy auth to intercept traffic and continuously exfiltrate user credentials to attacker infrastructure.