Javascript: получить CSS-селекторы по элементу

Question

[aymeshkov]

Возникла необычная задача такого рода:

Нужно получить все CSS-селекторы, однозначно определяющие данный элемент на странице.

Может быть кто-нибудь знает существующее решение?
Если нет — может подскажете простой алгоритм решения?

Comments

[MrCrock]

Обязательно средствами JavaScript?

[Владимир Чернышев]

Вам действительно нужны все возможные? Или достаточного одного, однозначно определяющего элемент?

[aymeshkov]

Достаточно одного, который однозначно определяет.

[Кирилл Длусский]

А для чего он вам нужен? А то в терминах CSS2.1 такого селектора может не существовать, поэтому если в последствии он будет использоваться именно для описания стиля — в IE может не прокатить.

[Кирилл Длусский]

Более того, в случае если страница динамическая — его может не существовать и в терминах CSS3.

Answer 1

[Melanitsky]

$(document).click(function(event) {
console.log(GetAppliedCssRules($(event.target)));
});

function GetAppliedCssRules($element) {
var appliedRules = [];
for (var x = 0; x < document.styleSheets.length; x++) {
var rules = document.styleSheets[x].cssRules;
for (var i = 0; i < rules.length; i++) {
if ($element.is(rules[i].selectorText)) {
appliedRules.push(rules[i].selectorText);
}
}
}
return appliedRules;
}

Answer 2

[chikuyonok]

А XPath-селектор не подойдёт? Типа body[1]/div[2]/p[5]

Answer 3

[Марк]

Если у элемента есть id, то '#' + id — селектор, однозначно определяющий этот элемент на странице.
Если у элемента нет id, нужно сгенерировать уникальный id; GOTO 10

Получить все CSS-селекторы, указывающие на этот элемент, не получится — их бесконечно много.

Comments

[aymeshkov]

Всех CSS-селекторов однозначно определяющих элемент конечное количество. Да меня на самом деле устроит и один:).

[pietrovich]

Если у элемента есть id, то '#' + id — селектор, однозначно определяющий этот элемент на странице.

Это пока не попадется кривулька в которой будет несколько элементов с одинаковым ID.

Answer 4

[Кирилл Длусский]

Самый простой, но не самый быстрый алгоритм, на мой взгляд

Если есть id — все очевидно.

Comments

[Кирилл Длусский]

Простите, вырвалось(

Так вот.
Если id у элемента нет — идем вверх по родителям, находим первого родителя с id, или корневой элемент, и начиная с него идем обратно, определяя каждого родителя как :nth-child(n). Т.е. у нас получится три варианта селекторов:

1. #WowWeHaveAnId
2. #ParentWithId:nth-child(4):nth-child(2)
3. html:nth-child(1):nth-child(4):nth-child(4)

Сразу замечу, что метод не сработает для динамических страниц, поскольку может поменяться количество элементов. Впрочем, при таком раскладе никакое другое решение также не даст 100% гарантии точности селектора.

P.S. Ну и да, лучше генерите уникальные id)

Answer 5

[Ульян Чесноков]

Открыть в Crome инспектор, через cmd + alt + c выбрать нужный элемент, который выделится в панели Elements и оттуда через меню Copy - Copy selector получить точный селектор.