JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main_class">
  <ul>
    <li>List item n1</li>
    <li>List item n2</li>
    <li id="id_on_list_because_why_not">List item n3</li>
  </ul>
</div>
<div id="some_id">
  <div class="main_class">
    <ul>
      <li>List item n1</li>
      <li>List item n2</li>
      <li id="id_on_list_because_why_not">List item n3</li>
    </ul>
  </div>
  <div data-foo="useless_attribute_hoes_here">
    <div>
      <div>
        <div>
          <div>
            <h3>
              a deeply nested title
            </h3>
            <p class="the_p">
              some text in a p, deeply nested too
            </p>
            <p class="the_p">
              other piece of text in a p
            </p>
            <p class="the_p">
              and another one here.
              <span>suddenly : span</span>
            </p>
          </div>
        </div>
        <p class="the_p">
          isolated p
        </p>
      </div>
    </div>
    <p class="the_p">
     wtf am I doing here ?
    </p>
  </div>
  <div data-foo="useless_attribute_hoes_here">
    <div>
      <div>
        <div>
          <div>
            <h3>
              a deeply nested title
            </h3>
            <p class="the_p">
              some text in a p, deeply nested too
            </p>
            <p class="the_p">
              other piece of text in a p
            </p>
            <p class="the_p">
              and another one here.
              <span>suddenly : span</span>
            </p>
          </div>
        </div>
        <p class="the_p">
          isolated p
        </p>
      </div>
    </div>
    <p class="the_p">
     wtf am I doing here ?
    </p>
  </div>
</div>

<pre id="display_queryselector_string">
  CLICK ON ANY ELEMENT TO DISPLAY IT QUERY PARAM
</pre>

CSS

body *{
  font-family:sans-serif;
  background-color:rgba(0,0,0,0.1);
  margin:10px 0;
  padding:10px 5px;
  cursor:pointer;
}
#some_id{
  padding-bottom:100px;
}
#display_queryselector_string{
  cursor:text;
  height:50px;
  line-height:50px;
  border:5px solid #000000;
  color:#ffffff;
  background-color:#4d4d4d;
  text-align:center;
  position:fixed;
  bottom:0;
  left:0;
  right:0;

  
}

JavaScript

document.body.onclick = function(e) {

	var el = e.target;
  
  if(el.getAttribute("id") == "display_queryselector_string") {
  	return;
  }
  
  document.getElementById("display_queryselector_string").innerHTML = getQuerySelector(el);
  
};

function getQuerySelector(elem) {

  var element = elem;
  var str = "";

  function loop(element) {
    
    // stop here = element has ID
    if(element.getAttribute("id")) {
      str = str.replace(/^/, " #" + element.getAttribute("id"));
      str = str.replace(/\s/, "");
      str = str.replace(/\s/g, " > ");
      return str;
    }

    // stop here = element is body
    if(document.body === element) {
      str = str.replace(/^/, " body");
      str = str.replace(/\s/, "");
      str = str.replace(/\s/g, " > ");
      return str;
    }

    // concat all classes in "queryselector" style
    if(element.getAttribute("class")) {
      var elemClasses = ".";
      elemClasses += element.getAttribute("class");
      elemClasses = elemClasses.replace(/\s/g, ".");
      elemClasses = elemClasses.replace(/^/g, " ");
      var classNth = "";

      // check if element class is the unique child
      var childrens = element.parentNode.children;

      if(childrens.length < 2) {
        return;
      }

      var similarClasses = [];
      
      for(var i = 0; i < childrens.length; i++) {
        if(element.getAttribute("class") == childrens[i].getAttribute("class")) {
          similarClasses.push(childrens[i]);
        }
      }

      if(similarClasses.length > 1) {
        for(var j = 0; j < similarClasses.length; j++) {
          if(element === similarClasses[j]) {
            j++;
            classNth = ":nth-of-type(" + j + ")";
            break;
          }
        }
      }

      str = str.replace(/^/, elemClasses + classNth);
      
    }
    else{

      // get nodeType
      var name = element.nodeName;
      name = name.toLowerCase();
      var nodeNth = "";

      var childrens = element.parentNode.children;

  ...