Generate a CSS selector path of a DOM element.

index.html

<!--  output of generated selector -->
<div class="selector"></div>

<article>
  <figure class="figure">
    <img src="https://images.unsplash.com/photo-1547082299-de196ea013d6?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTd8fGNvbXB1dGVyfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Article-Image">
    <figcaption class="figure-caption"></figcaption>
  </figure>
  <div class="article-body">
    <h2 class="article-title">TITLE</h2>
    <p class="article-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure nemo incidunt, similique
      blanditiis in quidem.</p>
    <button class="btn" type="button">READ MORE</button>
  </div>
</article>

script.js

function generateSelector(context) {
  let index, pathSelector, localName;

  if (context == "null") throw "not an dom reference";
  // call getIndex function
  index = getIndex(context);

  while (context.tagName) {
    // selector path
    pathSelector = context.localName + (pathSelector ? ">" + pathSelector : "");
    context = context.parentNode;
  }
  // selector path for nth of type
  pathSelector = pathSelector + `:nth-of-type(${index})`;
  return pathSelector;
}

// get index for nth of type element
function getIndex(node) {
  let i = 1;
  let tagName = node.tagName;

  while (node.previousSibling) {
    node = node.previousSibling;
    if (
      node.nodeType === 1 &&
      tagName.toLowerCase() == node.tagName.toLowerCase()
    ) {
      i++;
    }
  }
  return i;
}

// load document
document.addEventListener("DOMContentLoaded", () => {
  // click on element to get output
  document.body.addEventListener("click", (e) => {
    let selector = document.querySelector(".selector");
    // selector output
    let output = generateSelector(e.target);

    selector.innerHTML = `<strong>Selector:</strong> ${output}`;

    // element that you select
    let element = document.querySelector(output);
    console.log("Selected Element:", element);
  });
});

style.scss

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');

$lightColor: #fefefe;
$darkColor: #303030;
$blueColor: #9ac9ff;
$redColor: #ff9d9d;
$yellowColor: #ffe77b;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: $darkColor;
  background: #f0f0f0;
  font-family: "Montserrat", sans-serif;
}

.selector {
  margin-bottom: 30px;
}

article {
  width: 250px;
  background: $lightColor;
  border-radius: 5px;
  overflow: hidden;
}

// figure
.figure {
  width: 100%;
  height: 150px;
}
.figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

// article body
.article-body {
  padding: 15px;
}
.article-title {
  text-transform: uppercase;
}
.article-text {
  margin: 15px 0 30px;
  font-size: 0.85rem;
  line-height: 1.5;
  letter-spacing: 0.25px;
}

button {
  appearance: none;
  outline: none;
  border: none;
  padding: 8px 12px;
  background: blueviolet;
  color: $lightColor;
  font-family: "Montserrat", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-radius: 3px;
  cursor: pointer;
}