JSFiddle - React, Tailwind, and code Playground

by Sillvva

HTML

<p>Click on any element on this page</p>
<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 class="second_class" 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 the_p2">
              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>

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;
}

JavaScript

document.body.addEventListener("click", function(e) {
	var qsBoxId = "display_queryselector_string", el = e.target;

  var targetEl = document.getElementById(qsBoxId);
  if (targetEl) targetEl.remove();
  if (el.id == qsBoxId) return;

  const newEl = document.createElement('DIV');
  newEl.setAttribute('id', qsBoxId);
  newEl.setAttribute('style', 'cursor:text;height:50px;line-height:50px;border:5px solid #000000;color:#ffffff;background-color:#4d4d4d;text-align:center;position:fixed;bottom:22px;left:0;right:0;');
  newEl.innerHTML = buildQuerySelector(el);
  document.body.appendChild(newEl);
});

if (!buildQuerySelector) var buildQuerySelector = (elem) => {
  var path = [],
    parent;
  while (parent = elem.parentNode) {
    var tag = elem.tagName,
      siblings;
    var classes = Array.from(elem.classList.values());
    var classStr = classes.length ? `.${classes.join('.')}` : '';
    path.unshift(
      elem.id ? `#${elem.id}` : (
        siblings = parent.children,
        [].filter.call(siblings, sibling => sibling.tagName === tag && JSON.stringify(classes.sort()) === JSON.stringify(Array.from(sibling.classList.values()).sort())).length === 1 ? `${tag}${classStr}` : `${tag}${classStr}:nth-child(${1+[].indexOf.call(siblings, elem)})`
      )
    );
    if (elem.tagName == "BODY") break;
    elem = parent;
  };
  return `${path.join(' > ')}`.toLowerCase();
};