JarCasting
JarCasting JarCasting

css-selector-generator

WebJar for css-selector-generator

Лицензия

Лицензия
Категории

Категории

Github Инструменты разработки Контроль версий
Группа

Группа

org.webjars.bower
Идентификатор

Идентификатор

github-com-fczbkk-css-selector-generator
Последняя версия

Последняя версия

0.3.0
Дата

Дата
Тип

Тип

jar
Описание

Описание

css-selector-generator
WebJar for css-selector-generator
Ссылка на сайт

Ссылка на сайт

http://webjars.org
Система контроля версий

Система контроля версий

https://github.com/fczbkk/css-selector-generator

Скачать github-com-fczbkk-css-selector-generator

Имя Файла Размер
github-com-fczbkk-css-selector-generator-0.3.0.pom
github-com-fczbkk-css-selector-generator-0.3.0.jar 22 KB
github-com-fczbkk-css-selector-generator-0.3.0-sources.jar 22 bytes
github-com-fczbkk-css-selector-generator-0.3.0-javadoc.jar 22 bytes
Обзор

Как подключить последнюю версию

<!-- https://jarcasting.com/artifacts/org.webjars.bower/github-com-fczbkk-css-selector-generator/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>github-com-fczbkk-css-selector-generator</artifactId>
    <version>0.3.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bower/github-com-fczbkk-css-selector-generator/
implementation 'org.webjars.bower:github-com-fczbkk-css-selector-generator:0.3.0'
// https://jarcasting.com/artifacts/org.webjars.bower/github-com-fczbkk-css-selector-generator/
implementation ("org.webjars.bower:github-com-fczbkk-css-selector-generator:0.3.0")
'org.webjars.bower:github-com-fczbkk-css-selector-generator:jar:0.3.0'
<dependency org="org.webjars.bower" name="github-com-fczbkk-css-selector-generator" rev="0.3.0">
  <artifact name="github-com-fczbkk-css-selector-generator" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bower', module='github-com-fczbkk-css-selector-generator', version='0.3.0')
)
libraryDependencies += "org.webjars.bower" % "github-com-fczbkk-css-selector-generator" % "0.3.0"
[org.webjars.bower/github-com-fczbkk-css-selector-generator "0.3.0"]

Зависимости

Библиотека не имеет зависимостей. Это самодостаточное приложение, которое не зависит ни от каких других библиотек.

Модули Проекта

Данный проект не имеет модулей.

CSS Selector Generator

JavaScript object that creates a unique CSS selector for a given DOM element.

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.

Install

Add the library to your project via NPM or Yarn.

npm install css-selector-generator
yarn add css-selector-generator

Then include it in your source code:

import getCssSelector from 'css-selector-generator';

How to use

Simplest way to use it is to provide an element reference, without any options.

<body>
	<!-- targetElement -->
	<div class="myElement"></div>
</body>
getCssSelector(targetElement);
// ".myElement"

Typical example is to create a selector for any element that the user clicks on:

// 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);
});

Selector types

You can choose which types of selectors do you want to use:

<body>
	<!-- targetElement -->
	<div class="myElement"></div>
</body>
getCssSelector(targetElement, {selectors: ['class']});
// ".myElement"
getCssSelector(targetElement, {selectors: ['tag']});
// "div"

Order of selector types defines their priority:

getCssSelector(targetElement, {selectors: ['class', 'tag']});
// ".myElement"
getCssSelector(targetElement, {selectors: ['tag', 'class']});
// "div"

Root element

You can define root element, from which the selector will be created. If root element is not defined, document root will be used:

<body>
	<div class="myRootElement">
		<!-- targetElement -->
		<div class="myElement"></div>
	</div>
</body>
getCssSelector(targetElement)
// ".myRootElement > .myElement"
getCssSelector(targetElement, {root: document.querySelector('.myRootElement')});
// ".myElement"

Blacklist

If you want to ignore some selectors, you can put them on the blacklist. Blacklist is an array that can contain either regular expressions, or strings. In strings, you can use an asterisk (*) as a wildcard that will match any number of any characters.

<body>
	<!-- targetElement -->
	<div class="firstClass secondClass"></div>
</body>
getCssSelector(targetElement, {blacklist: ['.firstClass']});
// ".secondClass"
getCssSelector(targetElement, {blacklist: ['.first*']});
// ".secondClass"
getCssSelector(targetElement, {blacklist: [/first/]});
// ".secondClass"

Whitelist

Same as blacklist option, but instead of ignoring matching selectors, they will be prioritised.

<body>
	<!-- targetElement -->
	<div class="firstClass secondClass"></div>
</body>
getCssSelector(targetElement, {whitelist: ['.secondClass']});
// ".secondClass"
getCssSelector(targetElement, {whitelist: ['.second*']});
// ".secondClass"
getCssSelector(targetElement, {whitelist: [/second/]});
// ".secondClass"

Combine within selector

If set to true, the generator will try to look for combinations of selectors within a single type (usually class names) to get better overall selector.

<body>
	<!-- targetElement -->
	<div class="aaa bbb"></div>
	<div class="aaa ccc"></div>
	<div class="bbb ccc"></div>
</body>
getCssSelector(targetElement, {combineWithinSelector: false});
// "body > :nth-child(1)" - in this case no single class name is unique
getCssSelector(targetElement, {combineWithinSelector: true});
// ".aaa.bbb"

This option is set to true by default. It can be set to false for performance reasons.

Combine between selectors

If set to true, the generator will try to look for combinations of selectors between various types (e.g. tag name + class name) to get better overall selector.

<body>
	<!-- targetElement -->
	<div class="aaa"></div>
	<div class="bbb"></div>
	<p class="aaa"></div>
</body>
getCssSelector(targetElement, {combineBetweenSelectors: false});
// "body > :nth-child(1)" - in this case no single class name or tag name is unique
getCssSelector(targetElement, {combineBetweenSelectors: true});
// "div.aaa"

This option is set to true by default. It can be set to false for performance reasons.

Include tag

This option will add tag selector type to every selector:

<body>
	<!-- targetElement -->
	<div class="myElement"></div>
</body>
getCssSelector(targetElement, {includeTag: true});
// "div.myElement"

Documentation

Table of Contents

getCssSelector

Generates unique CSS selector for an element.

Parameters

Returns string

css_selector_generator_options

Type: Object

Properties

  • selectors Array<css_selector_type>? List of selector types to use. They will be prioritised by their order.
  • whitelist Array<(RegExp | string)>? List of selectors that should be prioritised.
  • blacklist Array<(RegExp | string)>? List of selectors that should be ignored.
  • root Element? Root element inside which the selector will be generated. If not set, the document root will be used.
  • combineWithinSelector boolean? If set to true, the generator will test combinations of selectors of single type (e.g. multiple class selectors).
  • combineBetweenSelectors boolean? If set to true, the generator will try to test combinations of selectors of different types (e.g. tag + class name).
  • includeTag boolean? If set to true, all generated selectors will include the TAG part. Even if tag selector type is not included in selectors option.

css_selector_type

Type: ("id" | "class" | "tag" | "attribute" | "nthchild" | "nthoftype")

Migrate from v1 to v2

Instead of creating a class and then calling the getSelector() method, now you just call a function getCssSelector() and provide it with element reference and options:

// v1
const mySelectorGenerator = new CssSelectorGenerator({/* custom options */});
mySelectorGenerator.getSelector(elementReference);

// v2
getCssSelector(elementReference, {/* custom options */});
  • Options id_blacklist, class_blacklist and attribute_blacklist are replaced with single blacklist option, which is now applied to all selector types.
  • Option attribute_whitelist is replaced with whitelist option, which is now applied to all selector types.
  • Option prefix_tag is renamed to includeTag.
  • Option quote_attribute_when_needed is removed. The attribute selectors are quoted automatically.

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 or send me an e-mail at riki@fczbkk.com

License

CSS Selector Generator is published under the MIT license.

Версии библиотеки

Версия
0.3.0