how to generate CSS Path with javascript or jquery?

Question

Any suggestions for how to generate the CSS Path for an element?

A CSS path is the path of css selectors needed to identify a specific element, for example, if my html is:

<div id="foo">
 <div class="bar">
  <ul>
   <li>1</li>
   <li>2</li>
   <li><span class="selected">3</span></li>
  </ul>
 </div>
</div>

then, the class path to "3" would be div#foo div.bar ul li span.selected

JQuery uses class paths to identify DOM elements and might provide a good solution, but I've been unable to find one up until now.

Could you clarify the question more? Probably give an example what you saw done with javascript? — Dan Soap, Oct 30 '09 at 07:22
I know this is an old thread but this link will solve this problem http://stackoverflow.com/questions/4588119/get-elements-css-selector-without-element-id — rayray, May 24 '12 at 08:43

score 9 · Answer 1 · answered Oct 30 '09 at 10:19

i don't understand why this one is downvoted, a good and legitimate question

here's an (oversimplified) example on how this could be done

<div id="a">
    <div class="b">
        <div><span></span></div>
    </div>
</div>


<script>
function getPath(elem) {
    if(elem.id)
        return "#" + elem.id;
    if(elem.tagName == "BODY")
        return '';
    var path = getPath(elem.parentNode);
    if(elem.className)
        return path + " " + elem.tagName + "." + elem.className;
    return path + " " + elem.tagName;
}

window.onload = function() {
    alert(getPath(document.getElementsByTagName("SPAN")[0]));
}
</script>

score 1 · Answer 2 · edited May 23 '17 at 11:43

Generate Css path of an element

Full Path Ex:body/footer.Footer/div.Footer-inner/ul.FooterList/li.FooterList_item

function getFullCSSPath(element) {
    if (element.tagName == 'HTML')    return '';
    if (element===document.body)      return getShortCSSPath(element);

   // To calculate position among siblings
    var position = 1;
    // Gets all siblings of that element.
    // Gets the parent tree node of the current tree node.
    var siblings = element.parentNode.childNodes;
    for (var i = 0; i < siblings.length; i++) {
        var sibling = siblings[i];
        // Checks Siblink with passed element.
        if (sibling === element)    {
            var elemCssPath = getShortCSSPath(element);
//console.log('====='+elemCssPath);
//console.log('-----'+position);
            return getFullCSSPath(element.parentNode)+'/'+elemCssPath; // using recursion to find its parents untill root element HTML
        }
        // if it is a siblink & element-node then only increments position. 
        var type = sibling.nodeType;
        if (type === 1 && sibling.tagName === element.tagName)            position++;
    }
}

Short Path Ex:li.FooterList_item

function getShortCSSPath(element) {
    var path = element.tagName.toLowerCase();
    if(element.id)
        path += "#" + element.id;   
    if(element.className)
        path += "." + element.className;
    return path;
}

Test

var elem = document.getElementsByTagName('div')[20];
console.log('Full  Path : '+getFullCSSPath(elem));
console.log('Short Path : '+getShortCSSPath(elem));

To generate Xpath

how to generate CSS Path with javascript or jquery?

2 Answers2

Linked