Skip to content

Instantly share code, notes, and snippets.

@ErosLever
Last active May 8, 2024 08:12
Show Gist options
  • Save ErosLever/51c794dc1f2bab888f571e47275c85cd to your computer and use it in GitHub Desktop.
Save ErosLever/51c794dc1f2bab888f571e47275c85cd to your computer and use it in GitHub Desktop.
JS GetCssSelector function - Handy function to get the full CSS selector of any element in the page
// you can include this from: https://cdn.rawgit.com/ErosLever/51c794dc1f2bab888f571e47275c85cd/raw/get-css-selector.js
/**
* Handy function to get the full CSS selector of any element in a web page
* @param {Element} e - the Element whose selector will be returned
* @returns {string} s - the complete CSS Selector including all ancestors elements
*/
function getFullSelector(e){
var s = "", t, i, c, p, n;
do{
t = e.tagName.toLowerCase();
i = e.hasAttribute("id") ? "#" + e.id : "";
c = e.hasAttribute("class") ? "." + e.className.split(/\s+/).join(".") : "";
p = e.parentNode;
n = Array.prototype.filter.call(e.parentNode.childNodes,function(x){
return x.nodeType == Node.ELEMENT_NODE;
}).indexOf(e) + 1;
s = t + i + c + ":nth-child(" + n + ") > " + s;
}while( !p || !(e = p).tagName.match(/^HTML$/i) );
return s.slice(0,-3);
}
/**
* Handy function to get the minimal CSS selector of any element in a web page
* @param {Element} e - the Element whose selector will be returned
* @returns {string} s - the minimal CSS Selector including its ancestors elements
*/
function getMinSelector(e){
var s = "", t, i, c, p, n;
do{
t = e.tagName.toLowerCase();
i = e.hasAttribute("id") ? "#" + e.id : "";
c = e.hasAttribute("class") ? "." + e.className.split(/\s+/).join(".") : "";
p = e.parentNode;
n = Array.prototype.filter.call(e.parentNode.childNodes,function(x){
return x.nodeType == Node.ELEMENT_NODE;
}).indexOf(e) + 1;
n = ":nth-child(" + n + ")";
if(i && p.querySelectorAll(i).length == 1)
s = i + " > " + s;
else if(p.querySelectorAll(t).length == 1)
s = t + " > " + s;
else if(c && p.querySelectorAll(t+c).length == 1)
s = t + c + " > " + s;
else if(i && c && p.querySelectorAll(t+i+c).length == 1)
s = t + i + c + " > " + s;
else
s = t + i + c + n + " > " + s;
}while( !p || !(e = p).tagName.match(/^HTML$/i) );
// try to remove parent selectors
cs = s.slice(0,-(" > ".length)).split(" > ");
s = cs.pop();
while( document.querySelectorAll(s).length > 1 ){
s = cs.pop() + " > " + s;
}
return s;
}
document.addEventListener('click', function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
console.log( getFullSelector( target ) );
console.log( getMinSelector( target ) );
}, false);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment