css-what

What is css-what?

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.

What are css-what's main functionalities?

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);

Other packages similar to css-what

css-select

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

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

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

css-what

A CSS selector parser.

Example

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 }
    ]
]

API

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

Security contact information

To report a security vulnerability, please use the Tidelift security contact. Tidelift will coordinate the fix and disclosure.

css-what for enterprise

Available 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.