JSFiddle - React, Tailwind, and code Playground

by saarmstrong

HTML

<label for="result">CSS Selector:</label>
<textarea type="text" name="result" disabled="disabled"></textarea>

<div id="foo">
    <h1>Header 1</h1>
    <p>lorem ipsem</p>
</div>

<div id="bar">
    <h1>Header 2</h1>
    <h2>Header 3</h2>
    <p>ipsum lorem</p>
</div>

CSS

#foo {
   border:3px solid red;
}

#bar {
    margin:5px;
    border:3px solid blue;
}

#baz{
  border:4px solid green;
}

JavaScript

(function($){
  $.fn.getSelector = function() {
     element = this[0];
      console.log($(element));

     var str = '';
     while(element && element.nodeType == 1) {
         var id = $(element.parentNode).children(element.tagName).index(element) + 1;
         id > 1 ? (id = ':nth-child(' + id + ')') : (id = '');             
         if(str.length > 0) {
            str = ' > ' + str;
         }
         str = element.tagName.toLowerCase() + id + str;
         element = element.parentNode;
     }
     return str;
  };
})(jQuery);

$('div,h1,p,h2').on('click', function(e) {
    e.stopPropagation();
    var str = $(e.currentTarget).getSelector();
    $('textarea[name=result]').val(str); 
});