JSFiddle - React, Tailwind, and code Playground

HTML

<div id="id1" class="c1 c2 c3">
    
    <div id="id2">
        
        <div class="c4 c5">
            
            <span>
                
                <span class="c6">
                    
                    <ul>
                        
                        <li><a href="#"><span id="lorem-ipsum">Lorem Ipsum</span> dolor sit amet</a></li>
                    </ul>
                </span>
            </span>
        </div>
    </div>
</div>

JavaScript

function getCSSPath(el, callback){
	
    var fullPath = '';
    
	var cssPathFn = function (el, callback){
		
		var elPath = '';
		
		elPath = $(el).prop('tagName').toLowerCase();
		
		if(typeof $(el).attr('id') !== 'undefined'){
			
			elPath = elPath+'#'+$(el).attr('id');
		}
		
		if(typeof $(el).attr('class') !== 'undefined'){
			
			elPath = elPath+'.'+$(el).attr('class').split(' ').join('.');
		}
		
		fullPath = elPath+' '+fullPath;
		//console.log($(el).parent().prop('tagName'));
		if(typeof $(el).parent().prop('tagName') !== 'undefined'){
			
			cssPathFn($(el).parent(), callback);
		}
		else{
			
			callback(fullPath);
		}
	};
	
	cssPathFn(el, callback);
}

$(document).ready(function (){
	
	getCSSPath($('#lorem-ipsum'), function (path){
		
		alert(path);
	});
});