Solution

You'll climb from the element toward the root, prepending a segment per node — #id (then stop) or tag:nth-of-type(n) — and join the segments with >.

The problem, in plain English

A unique selector is a path down the tree. Build it bottom-up: start at the element and walk up its ancestors, and for each one produce a segment specific enough to distinguish it from its siblings. Two kinds of segment cover it. An id is globally unique, so #id alone pins that node — and because it's unique, you can stop climbing there (the path above it is redundant). Without an id, tag:nth-of-type(n) says "the n-th <tag> among its siblings", which uniquely locates it under its parent. Prepend each segment (since you're going up but the selector reads down) and join with the child combinator >.

The mental model

Imagine breadcrumbs from the element up to the root. At each step ask: "does this node have an id?" If yes, drop #id and you're done — nothing above it matters. If no, figure out its rank among same-tag siblings (walk previousElementSibling, counting those with the same tag) and drop tag:nth-of-type(rank). Keep prepending until you hit the root. The child combinator > between segments makes each level a direct parent-child link, so the path can't accidentally match a differently-nested element.

A first attempt

The naive version uses just the tag name at each level:

function generateCssSelectorNaive(element, root) {
  const path = [];
  let node = element;
  while (node && node !== root) {
    path.unshift(node.tagName.toLowerCase()); // no way to tell siblings apart
    node = node.parentElement;
  }
  return path.join(' > ');
}

For <ul><li/><li/><li/></ul>, every <li> produces the same selector ul > li, which matches all three — not unique, and querySelector returns the first, not your target. You need a discriminator per level: :nth-of-type(n) for position, or #id when available (which also lets you stop early instead of walking all the way to the root).

The working solution

function generateCssSelector(element, root) {
  if (!element || element.nodeType !== 1) return '';

  const path = [];
  let node = element;

  while (node && node !== root && node.nodeType === 1) {
    if (node.id) {
      path.unshift(`#${node.id}`); // unique — anchor and stop
      break;
    }

    // Position among same-tag siblings (1-based).
    let nth = 1;
    let sib = node.previousElementSibling;
    while (sib) {
      if (sib.tagName === node.tagName) nth += 1;
      sib = sib.previousElementSibling;
    }

    path.unshift(`${node.tagName.toLowerCase()}:nth-of-type(${nth})`);
    node = node.parentElement;
  }

  return path.join(' > ');
}

module.exports = { generateCssSelector };

We climb from element while we haven't reached root. If a node has an id, we unshift('#' + id) and break — the id uniquely identifies it, so the segments above are unnecessary. Otherwise we compute nth-of-type by walking previousElementSibling and counting only siblings with the same tagName, then unshift the tag:nth-of-type(n) segment and move to the parent. unshift builds the path in document order (top → bottom) even though we traverse bottom → top. Joining with > yields a direct-descendant chain that querySelector resolves back to exactly the element.

Walking through one call

generateCssSelector(b, root) on <section id=main><p><b>x</b></p></section>:

• b — no id. Same-tag siblings before it: none → nth = 1. Prepend b:nth-of-type(1). Path: ['b:nth-of-type(1)']. Go to p.
• p — no id. No <p> before it → nth = 1. Prepend p:nth-of-type(1). Path: ['p:nth-of-type(1)', 'b:nth-of-type(1)']. Go to section.
• section — has id="main". Prepend #main, stop. Path: ['#main', 'p:nth-of-type(1)', 'b:nth-of-type(1)'].
• join — #main > p:nth-of-type(1) > b:nth-of-type(1). root.querySelector(...) walks #main → its p → its b = the element. Round-trip confirmed.

Gotchas

• Tag name only — can't distinguish same-tag siblings; querySelector returns the first. Add :nth-of-type(n) (or #id).
• :nth-child vs :nth-of-type — nth-child counts all siblings, so a <b> after a <span> would be nth-child(2); nth-of-type counts only same-tag siblings, which is what "n-th <b>" means.
• Not stopping at an id — climbing past an id makes the path longer and can even break if an ancestor is ambiguous. #id is a natural anchor — stop there.
• Descendant vs child combinator — join with > (direct child), not a space (any descendant), or the path can match a wrong-depth element.

Going further

• Prefer classes / attributes — devtools try stable classes or [data-*] before nth-of-type, since positional selectors break when siblings are added/removed.
• Shortest unique selector — a smarter generator emits the fewest segments that are still unique (often just an id or a distinctive class), not the full path.
• Escaping — ids/classes with special characters (spaces, :) need CSS.escape to be valid in a selector.