3.0.5 • Published 2 months ago
css-selector-parser v3.0.5
css-selector-parser
- Fast and low memory CSS selector parser.
- Parses CSS selector into object-model (AST).
- Compliant with all historical and modern CSS specs.
- Covered with tests.
- Documented.
- Supported CSS selector standards:
css1
: https://www.w3.org/TR/CSS1/css2
: https://www.w3.org/TR/CSS2/css3
/selectors-3
: https://www.w3.org/TR/selectors-3/selectors-4
: https://www.w3.org/TR/selectors-4/latest
: refers toselectors-4
progressive
:latest
+ accepts unknown psudo-classes, psudo-elements and attribute case sensitivity modifiers
Important:
Latest releases: Changelog.
Installation
npm install css-selector-parser
Usage
Parsing
import {createParser} from 'css-selector-parser';
const parse = createParser();
const selector = parse('a[href^="/"], .container:has(nav) > a[href]:nth-child(2)::before');
console.log(selector);
Produces:
({
type: 'Selector',
rules: [
{
type: 'Rule',
items: [
{ type: 'TagName', name: 'a' },
{
type: 'Attribute',
name: 'href',
operator: '^=',
value: { type: 'String', value: '/' }
}
]
},
{
type: 'Rule',
items: [
{ type: 'ClassName', name: 'container' },
{
type: 'PseudoClass',
name: 'has',
argument: {
type: 'Selector',
rules: [
{
type: 'Rule',
items: [ { type: 'TagName', name: 'nav' } ]
}
]
}
}
],
nestedRule: {
type: 'Rule',
items: [
{ type: 'TagName', name: 'a' },
{ type: 'Attribute', name: 'href' },
{
type: 'PseudoClass',
name: 'nth-child',
argument: { type: 'Formula', a: 0, b: 2 }
},
{
type: 'PseudoElement',
name: 'before'
}
],
combinator: '>'
}
}
]
})
Constructing AST and rendering
import {ast, render} from 'css-selector-parser';
const selector = ast.selector({
rules: [
ast.rule({
items: [
ast.tagName({name: 'a'}),
ast.attribute({name: 'href', operator: '^=', value: ast.string({value: '/'})})
]
}),
ast.rule({
items: [
ast.className({name: 'container'}),
ast.pseudoClass({
name: 'has',
argument: ast.selector({
rules: [ast.rule({items: [ast.tagName({name: 'nav'})]})]
})
})
],
nestedRule: ast.rule({
combinator: '>',
items: [
ast.tagName({name: 'a'}),
ast.attribute({name: 'href'}),
ast.pseudoClass({
name: 'nth-child',
argument: ast.formula({a: 0, b: 2})
}),
ast.pseudoElement({name: 'before'})
]
})
})
]
});
console.log(render(selector)); // a[href^="/"], .container:has(nav) > a[href]:nth-child(2)::before
API
LICENSE
MIT
Security contact information
To report a security vulnerability, please use the Tidelift security contact. Tidelift will coordinate the fix and disclosure.
3.0.5
2 months ago
3.0.4
4 months ago
3.0.3
5 months ago
3.0.2
5 months ago
3.0.1
5 months ago
3.0.0
7 months ago
2.3.0
10 months ago
2.3.2
10 months ago
2.3.1
10 months ago
2.2.1
11 months ago
2.2.0
11 months ago
2.2.3
11 months ago
2.2.2
11 months ago
2.1.0
11 months ago
2.0.0
11 months ago
1.4.1
4 years ago
1.4.0
4 years ago
1.3.0
7 years ago
1.2.0
8 years ago
1.1.0
9 years ago
1.0.4
9 years ago
1.0.3
11 years ago
1.0.2
11 years ago
1.0.1
11 years ago
1.0.0
11 years ago