Security News
The AI Industry Is Betting on Open Weights
An open letter signed by 50 companies, from NVIDIA and Microsoft to Mistral and Hugging Face, urges Washington not to restrict open weight AI.
By Sarah Gooding - Jul 27, 2026
🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
selderee
Selectors decision tree - pick matching selectors, fast.
What is it for
The problem statement: there are multiple CSS selectors with attached handlers, and a HTML DOM to process. For each HTML Element a matching handler has to be found and applied.
The naive approach is to walk through the DOM and test each and every selector against each Element. This means O(n*m) complexity.
It is pretty clear though that if we have selectors that share something in common then we can reduce the number of checks.
The main selderee package offers the selectors tree structure. Runnable decision functions for specific DOM implementations are built via plugins.
Limitations
- Only selected combinators are supported - child (
>) and adjacent siblings (+);- General siblings (
~), descendants (||) combinators are not supported;
- General siblings (
- (0.12.x+) Only selected pseudo-classes are currently supported -
:empty,:first-child,:last-child,:only-childand:any-link;- Other pseudo-classes and pseudo-elements are not supported here or in the underlying library parseley yet;
- Case sensitivity model of attribute value selectors is simplified: matching is case-sensitive by default (if no case-sensitivity flag is specified);
- (0.12.x+) It is left to client code to specify what attributes have to be case-insensitive by default - via
DecisionTreeOptions.attributesWithNormalizedValues.
- (0.12.x+) It is left to client code to specify what attributes have to be case-insensitive by default - via
selderee vs css-select
css-select - a CSS selector compiler & engine.
| Feature | selderee | css-select |
|---|---|---|
Support for htmlparser2 DOM AST | plugin | + |
| "Compiles" into a function | + | + |
| Pick selector(s) for a given Element | + | |
| Query Element(s) for a given selector | + |
Packages
| Package | Version | Folder | Changelog |
|---|---|---|---|
| selderee |  | /packages/selderee | changelog |
| @selderee/plugin-htmlparser2 |  | /packages/plugin-htmlparser2 | changelog |
Install
> npm i selderee @selderee/plugin-htmlparser2
Documentation
Usage example
const htmlparser2 = require('htmlparser2');
const util = require('util');
const { DecisionTree, Treeify } = require('selderee');
const { hp2Builder } = require('@selderee/plugin-htmlparser2');
const selectorValuePairs = [
['p', 'A'],
['p.foo[bar]', 'B'],
['p[class~=foo]', 'C'],
['div.foo', 'D'],
['div > p.foo', 'E'],
['div > p', 'F'],
['#baz', 'G']
];
// Make a tree structure from all given selectors.
const selectorsDecisionTree = new DecisionTree(
selectorValuePairs,
{ attributesWithNormalizedValues: [] }, // optional, default is `[]`
);
// `treeify` builder produces a string output for testing and debug purposes.
// `treeify` expects string values attached to each selector.
const prettyTree = selectorsDecisionTree.build(Treeify.treeify);
console.log(prettyTree);
const html = /*html*/`<html><body>
<div><p class="foo qux">second</p></div>
</body></html>`;
const dom = htmlparser2.parseDocument(html);
const element = dom.children[0].children[0].children[1].children[0];
// `hp2Builder` produces a picker that can pick values
// from the selectors tree.
const picker = selectorsDecisionTree.build(hp2Builder);
// Get all matches
const allMatches = picker.pickAll(element);
console.log(util.inspect(allMatches, { breakLength: 70, depth: null }));
// or get the value from the most specific match.
const bestMatch = picker.pick1(element);
console.log(`Best matched value: ${bestMatch}`);
Output of the example:
▽
├─◻ Tag name
│ ╟─◇ = p
│ ║ ┠─▣ Attr value: class
│ ║ ┃ ╙─◈ ~= "foo"s
│ ║ ┃ ┠─◨ Attr presence: bar
│ ║ ┃ ┃ ┖─◁ #1 [0,2,1] B
│ ║ ┃ ┠─◁ #2 [0,1,1] C
│ ║ ┃ ┖─◉ Push element: >
│ ║ ┃ └─◻ Tag name
│ ║ ┃ ╙─◇ = div
│ ║ ┃ ┖─◁ #4 [0,1,2] E
│ ║ ┠─◁ #0 [0,0,1] A
│ ║ ┖─◉ Push element: >
│ ║ └─◻ Tag name
│ ║ ╙─◇ = div
│ ║ ┖─◁ #5 [0,0,2] F
│ ╙─◇ = div
│ ┖─▣ Attr value: class
│ ╙─◈ ~= "foo"s
│ ┖─◁ #3 [0,1,1] D
└─▣ Attr value: id
╙─◈ = "baz"s
┖─◁ #6 [1,0,0] G
[
{ index: 2, value: 'C', specificity: [ 0, 1, 1 ] },
{ index: 4, value: 'E', specificity: [ 0, 1, 2 ] },
{ index: 0, value: 'A', specificity: [ 0, 0, 1 ] },
{ index: 5, value: 'F', specificity: [ 0, 0, 2 ] }
]
Best matched value: E
Some gotcha: you may notice the check for #baz has to be performed every time the decision tree is called. If it happens to be p#baz or div#baz or even .foo#baz - it would be much better to write it like this. Deeper, narrower tree means less checks on average. (in case of .foo#baz the class check might finally outweigh the tag name check and rebalance the tree.)
Other packages similar to selderee
postcss-selector-parser
postcss-selector-parser is a parser for CSS selectors that allows you to traverse and manipulate selectors. It is similar to selderee in that it provides a way to work with CSS selectors, but it is built on top of PostCSS and is more focused on the parsing and manipulation of selectors within the PostCSS ecosystem.
css-what
css-what is a simple CSS selector parser. It can parse selectors into an abstract syntax tree (AST) but does not include the decision map feature that selderee offers. It is more lightweight and less feature-rich compared to selderee.
Keywords
FAQs
Selectors decision tree - choose matching selectors, fast
We found that selderee 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.
Package last updated on 20 Mar 2026
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.
Related posts
Security News
/Research
Fake Corepack Site Distributes Infostealer and Proxyware to Developers
A fake corepack.org site is impersonating the Node.js tool and delivers an infostealer and proxyware to developers who download it.
By Kirill Boychenko, Sarah Gooding - Jul 24, 2026
Research
/Security News
Large-Scale GitHub Actions Abuse Powers a Distributed cPanel and WHM Exploitation Campaign
A large-scale campaign abused GitHub Actions in compromised repositories to exploit CVE-2026-41940 in cPanel and WHM and steal server credentials.
By Kirill Boychenko - Jul 22, 2026