Javascript: Get CSS selectors by element

Question

css

An unusual task of this kind arose:

We need to get all the CSS selectors that uniquely identify a given element on the page.

Does anyone know of an existing solution?
If not, can you suggest a simple solution algorithm?

Answer 1

$(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

Wouldn't an XPath selector work? Typebody[1]/div[2]/p[5]

Answer 3

If the element has an id, then it '#' + idis a selector that uniquely identifies this element on the page.
If the element does not have an id, a unique id must be generated; GOTO 10 You can't
get all the CSS selectors that point to this element - there are an infinite number of them.

Answer 4

The simplest, but not the fastest algorithm, in my opinion.
If there is an id, everything is obvious.

Answer 5

Open the inspector in Crome, through cmd + alt + cselect the desired element, which will be highlighted in the Elements panel and from there through the menu Copy - Copy selector to get the exact selector.