-
Notifications
You must be signed in to change notification settings - Fork 91
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4 from dandv/patch-1
Fix typos and link to the comparison/benchmark
- Loading branch information
Showing
1 changed file
with
11 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,14 +1,16 @@ | ||
# CSS Selector Generator | ||
|
||
JavaScript object that creates unique CSS selector for given element. | ||
JavaScript object that creates a unique CSS selector for a given DOM element. | ||
|
||
It should work fine in any modern browser. It has no external dependencies. | ||
|
||
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. | ||
|
||
## How to use | ||
|
||
```javascript | ||
// first, create instance of the object with default options | ||
my_selector_generator = new CssSelectorGenerator | ||
my_selector_generator = new CssSelectorGenerator; | ||
|
||
// create (or find reference to) any element | ||
my_element = document.createElement('div'); | ||
|
@@ -18,7 +20,7 @@ document.body.appendChild(my_element); | |
my_element_selector = my_selector_generator.getSelector(my_element); | ||
``` | ||
|
||
The most common use case is finding a unique CSS selector for any referenced element. This is handy if you, for example, let your users to select any element on the page by clicking on it: | ||
The most common use case is finding a unique CSS selector for any referenced element. This is handy if you, for example, let your users select any element on the page by clicking on it: | ||
|
||
```javascript | ||
// track every click | ||
|
@@ -34,10 +36,10 @@ document.body.addEventListener('click', function (event) { | |
|
||
## Options | ||
|
||
You can set the options either when creating an instance, or you can set them via `setOptions()` method: | ||
You can set the options either when creating an instance, or via the `setOptions()` method: | ||
|
||
```javascript | ||
custom_options = {selectors: ['tag', 'id', 'class']} | ||
custom_options = {selectors: ['tag', 'id', 'class']}; | ||
|
||
// set options when creating an instance | ||
my_selector_generator = new CssSelectorGenerator(custom_options); | ||
|
@@ -50,20 +52,20 @@ my_selector_generator.setOptions(custom_options); | |
|
||
default: `['tag', 'id', 'class', 'nthchild']` | ||
|
||
So far the only option you can use is list of types of selectors, that will be used when constructing unique CSS selector. You may want to adjust this list for browser compatibility. | ||
So far the only option available is the list of types of selectors that will be used when constructing the unique CSS selector. You may want to adjust this list for browser compatibility. | ||
|
||
Available values: | ||
|
||
- `'tag'` - Tag selector. E.g. `P`, `DIV`. | ||
- `'tag'` - Tag selector. E.g. `p`, `div`. | ||
- `'id'` - ID selector. E.g. `#myElement`. | ||
- `'class'` - Class selector. It will get all class names of the element. E.g. `.myClass`, `.firstClass.secondClass`. | ||
- `'nthchild'` - N-th child selector. It is supported from IE9 and higher, but it is necessary to create unique CSS selector for every possible element. You can remove it from the list for backwards browser compatibility, but then make sure to use IDs or class names on each element you want to target. E.g. `:nth-child(0)` | ||
- `'nthchild'` - N-th child selector. It is supported by IE9 and higher, but it is necessary to create a unique CSS selector for every possible element. You can remove it from the list for backwards browser compatibility, but then make sure to use IDs or class names on each element you want to target. E.g. `:nth-child(0)` | ||
- `'attribute'` - Attribute selector. Compatible wth IE7 and higher. It will not create matching pairs for element's ID and class name attributes. This type of selector is disabled by default. E.g. `[rel=someRel]` | ||
|
||
|
||
## Bug reports, feature requests and contact | ||
|
||
If you found any bugs, if you have feature requests or any questions, please, either [file an issue at GitHub][1] or send me an e-mail at [[email protected]][2] | ||
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 [[email protected]][2] | ||
|
||
## License | ||
|
||
|