css-selector-generator1.2.0 • Public • Published
CSS Selector Generator
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 and select the best alternative for your use case.
How to use
// first, create instance of the object with default optionsmy_selector_generator = ;// create (or find reference to) any elementmy_element = document;documentbody;// then you can get unique CSS selector for any referenced elementmy_element_selector = my_selector_generator;
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:
// track every clickdocumentbody;
You can set the options either when creating an instance, or via the
custom_options = selectors: 'tag' 'id' 'class';// set options when creating an instancemy_selector_generator = custom_options;// or set options latermy_selector_generator;
['id', 'class', 'tag', 'nthchild']
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.
NOTE: The generator keeps the order of selectors when testing for their uniqueness. So if you will set
['class', 'id'] and the element will have unique classname and ID, the resulting selector will contain classname, even if ID is stronger. Also, keep the
nthchild selector in last place, because it always generates unique selector and it will prevent using any other selector type behind it.
'tag'- Tag selector. E.g.
'id'- ID selector. E.g.
'class'- Class selector. It will get all class names of the element. E.g.
'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.
'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.
List of ID values, which will be ignored when creating ID selectors.
List of class names, which will be ignored when creating class selectors.
If set to true, ID selectors will be prefixed with the tag name.
For example selector for this element
will look like this:
List of attribute names, which will be ignored when creating attribute selectors. Attributes "id" and "class" are always be ignored.
List of attribute names, which will be prioritised when creating attribute selectors.
If set to
true, attribute selector values will be quoted and escaped when needed.
Bug reports, feature requests and contact
CSS Selector Generator is published under the UNLICENSE license. Feel free to use it in any way.