Get specific CSS path of given element.

cssPath.js

/**
 * Get the CSS path of a given element.
 *
 * @param {Pick<Element, "id" | "parentElement" | "tagName">} [element] Element to get the css path to.
 * @param {string} [path=""] Path so far (used in recursion).
 * @returns {string} Full CSS path to the given element
 */
export const cssPath = (element, path = "") => {
	const tagName = element?.tagName ?? "HTML";
	const childrenOfType = element?.parentElement
		? [...element.parentElement.children].filter(
				(child) => child.tagName === tagName,
			)
		: [];
	const nth = childrenOfType.indexOf(/** @type {Element} */ element) + 1;

	return `${
		element?.id
			? `#${element.id}`
			: tagName === "HTML"
				? ""
				: cssPath(
						element?.parentElement ?? undefined,
						`${tagName.toLocaleLowerCase()}${nth > 1 ? (nth === childrenOfType.length ? ":last-of-type" : `:nth-of-type(${nth})`) : ""}${path !== "" ? ">" : ""}`,
					)
	}${path}`;
};