finder

The CSS Selector Generator

Test JSR

• Generates shortest CSS selectors
• Unique CSS selectors per page
• Stable and robust CSS selectors
• Size: 1.5kb (minified & gzipped)

npm install @medv/finder

import { finder } from '@medv/finder';
document.addEventListener('click', (event) => {
 const selector = finder(event.target);
});

An example of a generated selector:

.blog > article:nth-of-type(3) .add-comment

const selector = finder(event.target, {
 root: document.body,
 timeoutMs: 1000,
});

Defines the root of the search. Defaults to document.body.

Timeout to search for a selector. Defaults to 1000ms. After the timeout, finder fallbacks to nth-child selectors.

Function that determines if a class name may be used in a selector. Defaults to a word-like class names.

You can extend the default behaviour wrapping the className function:

import { finder, className } from '@medv/finder';
finder(event.target, {
 className: name => className(name) || name.startsWith('my-class-'),
});

Function that determines if a tag name may be used in a selector. Defaults to () => true.

Function that determines if an attribute may be used in a selector. Defaults to a word-like attribute names and values.

You can extend the default behaviour wrapping the attr function:

import { finder, attr } from '@medv/finder';
finder(event.target, {
 attr: (name, value) => attr(name, value) || name.startsWith('data-my-attr-'),
});

Function that determines if an id name may be used in a selector. Defaults to a word-like id names.

Minimum length of levels in fining selector. Defaults to 3.

Minimum length for optimising selector. Defaults to 2.

MIT