JSFiddle - React, Tailwind, and code Playground

by Gabriele Petrioli

HTML

<div>sample text in div 1
    <ul>
        <li>list item 1 in 1st div</li>
        <li class="list-2">list item 2 in 1st div <strong>(bold text)</strong>

        </li>
    </ul>
</div>
<div>second <span>div</span> here with <em id="emphatic">emphasized <span id="deepest" class="red">with deeper</span></em> text</div>
<div id="css"></div>

CSS

strong {
    font-weight:bold;
}
em {
    font-style:italic;
}
li {
    margin-left:15px;
    padding-left:5px;
    list-style:disc
}
.red {
    color:red
}
#css {
    font-family:courier;
    padding:3px;
    margin-top:10px;
}

JavaScript

$.fn.fullSelector = function () {
    var path = this.parents().addBack();
    var quickCss = path.get().map(function (item) {
        var self = $(item),
            id = item.id ? '#' + item.id : '',
            clss = item.classList.length ? item.classList.toString().split(' ').map(function (c) {
                return '.' + c;
            }).join('') : '',
            name = item.nodeName.toLowerCase(),
            index = self.siblings(name).length ? ':nth-child(' + (self.index() + 1) + ')' : '';
        
        if (name === 'html' || name === 'body') {
            return name;
        }
        return name + index + id + clss;
        
    }).join(' > ');

    return quickCss;
};

// click on part of the page to see the CSS selector


$(document).on('click','*', function(){
    $('#css').text( $(this).fullSelector() );
    
    return false;
});