https://github.com/fczbkk/css-selector-generator
JavaScript object that creates unique CSS selector for given element.
https://github.com/fczbkk/css-selector-generator
css css-selector dom element
Last synced: 7 months ago
JSON representation
JavaScript object that creates unique CSS selector for given element.
- Host: GitHub
- URL: https://github.com/fczbkk/css-selector-generator
- Owner: fczbkk
- License: mit
- Created: 2014-01-15T07:15:00.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2025-05-12T21:06:06.000Z (12 months ago)
- Last Synced: 2025-05-12T22:23:41.248Z (12 months ago)
- Topics: css, css-selector, dom, element
- Language: TypeScript
- Homepage:
- Size: 7.23 MB
- Stars: 561
- Watchers: 7
- Forks: 93
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# CSS Selector Generator
JavaScript object that creates a unique CSS selector for a given DOM element or multiple DOM elements.
It also generates shorter selectors and is faster and/or more robust than many other libraries - see this [comparison](https://github.com/fczbkk/css-selector-generator-benchmark) and select the best alternative for your use case.
## Install
Add the library to your project via NPM or Yarn.
```shell
npm install css-selector-generator
yarn add css-selector-generator
```
Then include it in your source code:
```javascript
import { getCssSelector } from "css-selector-generator";
```
## How to use
Simplest way to use it is to provide an element reference, without any options.
```html
```
```javascript
getCssSelector(targetElement);
// ".myElement"
```
Typical example is to create a selector for any element that the user clicks on:
```javascript
// track every click
document.body.addEventListener("click", function (event) {
// get reference to the element user clicked on
const element = event.target;
// get unique CSS selector for that element
const selector = getCssSelector(element);
// do whatever you need to do with that selector
console.log("selector", selector);
});
```
### Usage without NPM
If you don't want to use this library with NPM, you can download it directly from the "build" folder and insert it to your HTML document directly. In this case, the library is wrapped in namespace `CssSelectorGenerator`. So the usage would look something like this:
```html
CssSelectorGenerator.getCssSelector(targetElement)
> :nth-child(1) ->
> :nth-child(1) ->
> :nth-child(1) ->
> :nth-child(1) ->
```
But if you generate the selector **with** the `useScope` option:
```javascript
getCssSelector(needleElement, {
root: haystackElement,
useScope: true,
});
```
...it will produce this fallback selector:
```:scope > :nth-child(1) > :nth-child(1)```
... where the selectors correspond with these elements:
```
:scope ->
> :nth-child(1) ->
> :nth-child(1) ->
```
## Bug reports, feature requests and contact
If you found any bugs, if you have feature requests or any questions, please, either [file an issue on GitHub][1] or send me an e-mail at [riki@fczbkk.com][2]
## License
CSS Selector Generator is published under the [MIT license][3].
[1]: https://github.com/fczbkk/css-selector-generator/issues
[2]: mailto:riki@fczbkk.com?subject=CSSSelectorGenerator
[3]: https://github.com/fczbkk/css-selector-generator/blob/master/LICENSE