create css selector

by Ritesh Pandey

HTML

<body>
    <div>
      <span class="bbb">This span is limed!</span>
      <span class="bbb" id="asd">This span is not. :(</span>
      <em>This one is odd. </em>
      <span class="bbb">Sadly, this one is not...</span>
      <span class="bbb">But this one is!</span>
    </div>
</body>

CSS

span.bbb:nth-child(2) {
    background-color: red;
}

JavaScript

(function () {
    var d = document.querySelectorAll("span.bbb");
    var tempD = d[0];
    var element, currentSelectorString = "", classList, classListString = "";
    do {
        element = tempD;
        console.log("element", element);
        if (element.nodeName) {
            console.log("nodeName", element.nodeName);
            currentSelectorString = element.nodeName + currentSelectorString;
        } 
        if (element.id) {
            console.log("id", element.id);
            currentSelectorString += "#" + element.id;
        } else if (element.ClassList && element.ClassList.length > 0) {
            console.log("classlist", element.classList);
            classList = element.ClassList;
            classListString = Array.prototype.slice.call(classList, 0).join(".");
            currentSelectorString += classListString;
        }
        console.log("currentSelectorString", currentSelectorString);
        currentSelectorString = " > " + currentSelectorString;
        tempD = tempD.parentElement;
        
    } while(tempD && !tempD.id && tempD.nodeName.toLowerCase() !== "body");
})();