We Keep Coding

Selection.focusNode doesn't work on a <br> element [duplicate]

I am trying to develop a wysiwyg editör.
In the editör, i am trying to find the position of "br" when onkeydown function fire.
<p><b>1234</b><br><br>678</p>
When i locate cursor near 6 getting 678 with "oSelection.anchorNode.nodeValue".
When i locate cursot near "br" getting nothing.
i want to find before and after tag near cursor?

Update 2: After talking to ismail the question could be changed to: how to find out, whether the element before/after the cursor is a <br> tag. This can be achieved like this:
var selection = window.getSelection(),
isBRBeforeCursor = IsBRBeforeCursor(selection),
isBRAfterCursor = IsBRAfterCursor(selection);
function GetPreviousSibling(node) {
if (node.previousSibling != null) {
return node.previousSibling;
} else if (node.parentNode != null) {
return GetPreviousSibling(node.parentNode);
} else {
return null;
}
}
function GetNextSibling(node) {
if (node.nextSibling != null) {
return node.nextSibling;
} else if (node.parentNode != null) {
return GetNextSibling(node.parentNode);
} else {
return null;
}
}
function IsBRBeforeCursor(selection) {
if(selection.anchorNode.nodeName === '#text') {
if(selection.anchorOffset > 0) {
// There is text before the cursor
return false;
} else {
var previousSibling = GetPreviousSibling(selection.anchorNode);
return previousSibling !== null && previousSibling.nodeName === 'BR';
}
} else {
if(selection.anchorOffset > 0) {
return selection.anchorNode.childNodes[selection.anchorOffset - 1].nodeName === 'BR';
} else {
var previousSibling = GetPreviousSibling(selection.anchorNode);
return previousSibling !== null && previousSibling.nodeName === 'BR';
}
}
}
function IsBRAfterCursor(selection) {
if(selection.anchorNode.nodeName === '#text') {
if(selection.anchorOffset < selection.anchorNode.nodeValue.length) {
// There is text after the cursor
return false;
} else {
var nextSibling = GetNextSibling(selection.anchorNode);
return nextSibling !== null && nextSibling.nodeName === 'BR';
}
} else {
if(selection.anchorNode.childNodes.length > selection.anchorOffset) {
return selection.anchorNode.childNodes[selection.anchorOffset].nodeName === 'BR';
} else {
var nextSibling = GetNextSibling(selection.anchorNode);
return nextSibling !== null && nextSibling.nodeName === 'BR';
}
}
}
Update: I think it is a bit tricky to always find the correct previous/next element, because the text is a node itself. So to get the previous/next element, you need to go a level up sometimes before looking left and right. Have a look at the following example:
<p><b>123</b><br><u><i><br>456</i></u><br></p>
Cursor is between 1 and 2.
The next element is <br>, which is one level up and then to the right.
Cursor is between 4 and 5.
The previous element is <br>, which is just one to the left.
The next element is <br>, which is two levels up and then to the right.
If this is the case, you can find the previous/next element like this:
function getElementBeforeSelection() {
var anchor = window.getSelection().anchorNode;
while(anchor.previousSibling === null && anchor.nodeName != 'BODY') {
anchor = anchor.parentNode;
}
return anchor.previousSibling;
}
Original answer: You can get to the surrounding elements with parentNode, previousSibling and nextSibling. So the tags before and after the cursor are:
var anchorNode = window.getSelection().anchorNode,
before = anchorNode.previousSibling,
after = anchorNode.nextSibling;

Rewrite script from js to jquery

I have a script that I want to make more bulletproof. At the moment the page breaks because class box-tip is not found. To make this bulletproof and not throw an error how can I rewrote the below code to jquery getting the same results as js
function applyRecommendedSleeveLength(selectedVal) {
if (selectedVal !== undefined) {
var recommendedVal = map[selectedVal.trim()];
var selected = $('.attribute__swatch--selected:first div').text().trim();
if (recommendedVal === null || recommendedVal === undefined) {
selectedVal = $('.attribute__swatch--selected:first div').text().trim();
recommendedVal = map[selectedVal.trim()];
}
if (selected === null || selected === '' || selected === undefined) return;
var recommendedLis = document.querySelectorAll('[class*="attribute__swatch--length-' + recommendedVal + '"] div');
recommendedLis.forEach(function(recommendedLi, i) {
if (recommendedLi !== null && recommendedLi !== undefined) {
recommendedLi.classList.add('showBorder');
$('.box-tip').show();
var currentPosition = $('.showBorder').parent().position().left;
var sleeveRecom = document.getElementsByClassName('box-tip');
var info = sleeveRecom.length ? sleeveRecom[0] : false;
info.style.paddingLeft = currentPosition + -75 + 'px';
}
});
}
}

If you want to check if the div exists, you can use this (using JQuery):
if ( $('.box-tip').length != 0 ){
//do something
}
OR- since you've edited your post- without JQuery:
if ( document.getElementsByClassName('box-tip').length != 0 ){
//do something
}

Just use jQuery for all of this. If the class doesn't exist the jQuery methods won't cause errors
function applyRecommendedSleeveLength() {
$('.box-tip').show().first().css('paddingLeft', (currentPosition - 75) + 'px');
}

Page Middle Click Listener

I need to pop-up alert when I use Middle Click and it must don't pop-up if I click it on a link but on any other element of page (or just on empty space).
var test = {
pageMiddleClickListener : function(e) {
if(e.which === 2) {
//if (!gContextMenu.onLink) {
alert('ok');
//}
}
}
window.addEventListener("click",test.pageMiddleClickListener,false);
Alert show-ups when I use Middle Click on a link, but I need to prevent this behavior to links
I need something like "!gContextMenu.onLink" but not for context menu (without)

There are multiple ways that you can test for the target of the click being a link. One way would be to check to see if the Element.tagName is A, another would be to test for the href property. As it turns out is is also necessary to test to see if any of the target's parentNodes are links.
var test = {
pageMiddleClickListener : function(e) {
if(e.button === 1) {
if (!test.isLinkOrAParentIsLink(e.target)) {
e.view.alert('ok');
}
}
},
isLinkOrAParentIsLink : function(el) {
if (el.tagName === "A") {
return true;
} //else
let parent= el.parentNode;
while (parent !== null && typeof parent.tagName !== "undefined") {
if (parent.tagName === "A") {
return true;
} //else
parent= parent.parentNode;
}
return false;
}
}
window.addEventListener("click",test.pageMiddleClickListener,false);
or
isLinkOrAParentIsLink : function(el) {
if (el.hasAttribute("href")) {
return true;
} //else
let parent= el.parentNode;
while (parent !== null && typeof parent.tagName !== "undefined") {
if (parent.hasAttribute("href")) {
return true;
} //else
parent= parent.parentNode;
}
return false;
}
Note: I changed e.which to e.button as that is what is in the specification for click events and MouseEvent.which is non-standard. Note this also required testing for e.button === 1 instead of 2.

You can check if you have clicked an <a> with the prop method.
$(this).prop("tagName") == "A"
In your event listener:
var test = {
pageMiddleClickListener : function(e) {
if(e.which === 2) {
// not an <a> ?
if ($(this).prop("tagName") !== "A") {
alert('ok');
}
}
}
window.addEventListener("click",test.pageMiddleClickListener,false);

Convert html string to selector syntax [duplicate]

I got this function to get a cssPath :
var cssPath = function (el) {
var path = [];
while (
(el.nodeName.toLowerCase() != 'html') &&
(el = el.parentNode) &&
path.unshift(el.nodeName.toLowerCase() +
(el.id ? '#' + el.id : '') +
(el.className ? '.' + el.className.replace(/\s+/g, ".") : ''))
);
return path.join(" > ");
}
console.log(cssPath(document.getElementsByTagName('a')[123]));
But i got something like this :
html > body > div#div-id > div.site > div.clearfix > ul.choices > li
But to be totally right, it should look like this :html > body > div#div-id > div.site:nth-child(1) > div.clearfix > ul.choices > li:nth-child(5)
Did someone have any idea to implement it simply in javascript ?

The answer above actually has a bug in it — the while loop breaks prematurely when it encounters a non-element node (e.g. a text node) resulting in an incorrect CSS selector.
Here's an improved version that fixes that problem plus:
Stops when it encounters the first ancestor element with an id assigned to it
Uses nth-of-type() to make the selectors more readable
var cssPath = function(el) {
if (!(el instanceof Element))
return;
var path = [];
while (el.nodeType === Node.ELEMENT_NODE) {
var selector = el.nodeName.toLowerCase();
if (el.id) {
selector += '#' + el.id;
path.unshift(selector);
break;
} else {
var sib = el, nth = 1;
while (sib = sib.previousElementSibling) {
if (sib.nodeName.toLowerCase() == selector)
nth++;
}
if (nth != 1)
selector += ":nth-of-type("+nth+")";
}
path.unshift(selector);
el = el.parentNode;
}
return path.join(" > ");
}

To always get the right element, you will need to use :nth-child() or :nth-of-type() for selectors that do not uniquely identify an element. So try this:
var cssPath = function(el) {
if (!(el instanceof Element)) return;
var path = [];
while (el.nodeType === Node.ELEMENT_NODE) {
var selector = el.nodeName.toLowerCase();
if (el.id) {
selector += '#' + el.id;
} else {
var sib = el, nth = 1;
while (sib.nodeType === Node.ELEMENT_NODE && (sib = sib.previousSibling) && nth++);
selector += ":nth-child("+nth+")";
}
path.unshift(selector);
el = el.parentNode;
}
return path.join(" > ");
}
You could add a routine to check for unique elements in their corresponding context (like TITLE, BASE, CAPTION, etc.).

The two other provided answers had a couple of assumptions with browser compatibility that I ran into. Below code will not use nth-child and also has the previousElementSibling check.
function previousElementSibling (element) {
if (element.previousElementSibling !== 'undefined') {
return element.previousElementSibling;
} else {
// Loop through ignoring anything not an element
while (element = element.previousSibling) {
if (element.nodeType === 1) {
return element;
}
}
}
}
function getPath (element) {
// False on non-elements
if (!(element instanceof HTMLElement)) { return false; }
var path = [];
while (element.nodeType === Node.ELEMENT_NODE) {
var selector = element.nodeName;
if (element.id) { selector += ('#' + element.id); }
else {
// Walk backwards until there is no previous sibling
var sibling = element;
// Will hold nodeName to join for adjacent selection
var siblingSelectors = [];
while (sibling !== null && sibling.nodeType === Node.ELEMENT_NODE) {
siblingSelectors.unshift(sibling.nodeName);
sibling = previousElementSibling(sibling);
}
// :first-child does not apply to HTML
if (siblingSelectors[0] !== 'HTML') {
siblingSelectors[0] = siblingSelectors[0] + ':first-child';
}
selector = siblingSelectors.join(' + ');
}
path.unshift(selector);
element = element.parentNode;
}
return path.join(' > ');
}

Doing a reverse CSS selector lookup is an inherently tricky thing. I've generally come across two types of solutions:
Go up the DOM tree to assemble the selector string out of a combination of element names, classes, and the id or name attribute. The problem with this method is that it can result in selectors that return multiple elements, which won't cut it if we require them to select only one unique element.
Assemble the selector string using nth-child() or nth-of-type(), which can result in very long selectors. In most cases the longer a selector is the higher specificity it has, and the higher the specificity the more likely it will break when the DOM structure changes.
The solution below is an attempt at tackling both of these issues. It is a hybrid approach that outputs a unique CSS selector (i.e., document.querySelectorAll(getUniqueSelector(el)) should always return a one-item array). While the returned selector string is not necessarily the shortest, it is derived with an eye towards CSS selector efficiency while balancing specificity by prioritizing nth-of-type() and nth-child() last.
You can specify what attributes to incorporate into the selector by updating the aAttr array. The minimum browser requirement is IE 9.
function getUniqueSelector(elSrc) {
if (!(elSrc instanceof Element)) return;
var sSel,
aAttr = ['name', 'value', 'title', 'placeholder', 'data-*'], // Common attributes
aSel = [],
// Derive selector from element
getSelector = function(el) {
// 1. Check ID first
// NOTE: ID must be unique amongst all IDs in an HTML5 document.
// https://www.w3.org/TR/html5/dom.html#the-id-attribute
if (el.id) {
aSel.unshift('#' + el.id);
return true;
}
aSel.unshift(sSel = el.nodeName.toLowerCase());
// 2. Try to select by classes
if (el.className) {
aSel[0] = sSel += '.' + el.className.trim().replace(/ +/g, '.');
if (uniqueQuery()) return true;
}
// 3. Try to select by classes + attributes
for (var i=0; i<aAttr.length; ++i) {
if (aAttr[i]==='data-*') {
// Build array of data attributes
var aDataAttr = [].filter.call(el.attributes, function(attr) {
return attr.name.indexOf('data-')===0;
});
for (var j=0; j<aDataAttr.length; ++j) {
aSel[0] = sSel += '[' + aDataAttr[j].name + '="' + aDataAttr[j].value + '"]';
if (uniqueQuery()) return true;
}
} else if (el[aAttr[i]]) {
aSel[0] = sSel += '[' + aAttr[i] + '="' + el[aAttr[i]] + '"]';
if (uniqueQuery()) return true;
}
}
// 4. Try to select by nth-of-type() as a fallback for generic elements
var elChild = el,
sChild,
n = 1;
while (elChild = elChild.previousElementSibling) {
if (elChild.nodeName===el.nodeName) ++n;
}
aSel[0] = sSel += ':nth-of-type(' + n + ')';
if (uniqueQuery()) return true;
// 5. Try to select by nth-child() as a last resort
elChild = el;
n = 1;
while (elChild = elChild.previousElementSibling) ++n;
aSel[0] = sSel = sSel.replace(/:nth-of-type\(\d+\)/, n>1 ? ':nth-child(' + n + ')' : ':first-child');
if (uniqueQuery()) return true;
return false;
},
// Test query to see if it returns one element
uniqueQuery = function() {
return document.querySelectorAll(aSel.join('>')||null).length===1;
};
// Walk up the DOM tree to compile a unique selector
while (elSrc.parentNode) {
if (getSelector(elSrc)) return aSel.join(' > ');
elSrc = elSrc.parentNode;
}
}

I somehow find all the implementations unreadable due to unnecessary mutation. Here I provide mine in ClojureScript and JS:
(defn element? [x]
(and (not (nil? x))
(identical? (.-nodeType x) js/Node.ELEMENT_NODE)))
(defn nth-child [el]
(loop [sib el nth 1]
(if sib
(recur (.-previousSibling sib) (inc nth))
(dec nth))))
(defn element-path
([el] (element-path el []))
([el path]
(if (element? el)
(let [tag (.. el -nodeName (toLowerCase))
id (and (not (string/blank? (.-id el))) (.-id el))]
(if id
(element-path nil (conj path (str "#" id)))
(element-path
(.-parentNode el)
(conj path (str tag ":nth-child(" (nth-child el) ")")))))
(string/join " > " (reverse path)))))
Javascript:
const isElement = (x) => x && x.nodeType === Node.ELEMENT_NODE;
const nthChild = (el, nth = 1) => {
if (el) {
return nthChild(el.previousSibling, nth + 1);
} else {
return nth - 1;
}
};
const elementPath = (el, path = []) => {
if (isElement(el)) {
const tag = el.nodeName.toLowerCase(),
id = (el.id.length != 0 && el.id);
if (id) {
return elementPath(
null, path.concat([`#${id}`]));
} else {
return elementPath(
el.parentNode,
path.concat([`${tag}:nth-child(${nthChild(el)})`]));
}
} else {
return path.reverse().join(" > ");
}
};

There are some js libraries that do exactly this:
https://github.com/antonmedv/finder
https://github.com/gmmorris/simmerjs
I am using the first one and with success so far

function cssPath (e, anchor) {
var selector;
var parent = e.parentNode, child = e;
var tagSelector = e.nodeName.toLowerCase();
while (anchor && parent != anchor || !anchor && parent.nodeType === NodeTypes.ELEMENT_NODE) {
var cssAttributes = ['id', 'name', 'class', 'type', 'alt', 'title', 'value'];
var childSelector = tagSelector;
if (!selector || parent.querySelectorAll (selector).length > 1) {
for (var i = 0; i < cssAttributes.length; i++) {
var attr = cssAttributes[i];
var value = child.getAttribute(attr);
if (value) {
if (attr === 'id') {
childSelector = '#' + value;
} else if (attr === 'class') {
childSelector = childSelector + '.' + value.replace(/\s/g, ".").replace(/\.\./g, ".");
} else {
childSelector = childSelector + '[' + attr + '="' + value + '"]';
}
}
}
var putativeSelector = selector? childSelector + ' ' + selector: childSelector;
if (parent.querySelectorAll (putativeSelector).length > 1) {
var siblings = parent.querySelectorAll (':scope > ' + tagSelector);
for (var index = 0; index < siblings.length; index++)
if (siblings [index] === child) {
childSelector = childSelector + ':nth-of-type(' + (index + 1) + ')';
putativeSelector = selector? childSelector + ' ' + selector: childSelector;
break;
}
}
selector = putativeSelector;
}
child = parent;
parent = parent.parentNode;
}
return selector;
};

Better late than never: I came to this question and tried to use the selected answer, but in my case, it didn't worked because it wasn't very specific for my case. So I decided to write my own solution - I hope it may help some.
This solution goes like this: tag.class#id[name][type]:nth-child(?), and targeted with >.
function path(e) {
let a = [];
while (e.parentNode) {
let d = [
e.tagName.toLowerCase(),
e.hasAttribute("class") ? e.getAttribute("class") : "",
e.hasAttribute("id") ? e.getAttribute("id") : "",
e.hasAttribute("name") ? e.getAttribute("name") : "",
e.hasAttribute("type") ? e.getAttribute("type") : "",
0 // nth-child
];
// Trim
for (let i = 0; i < d.length; i++) d[i] = typeof d[i] == "string" ? d[i].trim() : d[i];
if (d[1] != "") d[1] = "."+d[1].split(" ").join(".");
if (d[2] != "") d[2] = "#"+d[2];
if (d[3] != "") d[3] = '[name="'+d[3]+'"]';
if (d[4] != "") d[4] = '[type="'+d[4]+'"]';
// Get child index...
let s = e;
while (s) {
d[5]++;
s = s.previousElementSibling;
}
d[5] = d[5] != "" ? ":nth-child("+d[5]+")" : ":only-child";
// Build the String
s = "";
for (let i = 0; i < d.length; i++) s += d[i];
a.unshift(s);
// Go to Parent
e = e.parentNode;
}
return a.join(">");
}
I know it's not that readable (I use it in my messy code), but it will give you the exact element(s) you're looking for. Just try it.

Get CSS path from Dom element

I got this function to get a cssPath :
var cssPath = function (el) {
var path = [];
while (
(el.nodeName.toLowerCase() != 'html') &&
(el = el.parentNode) &&
path.unshift(el.nodeName.toLowerCase() +
(el.id ? '#' + el.id : '') +
(el.className ? '.' + el.className.replace(/\s+/g, ".") : ''))
);
return path.join(" > ");
}
console.log(cssPath(document.getElementsByTagName('a')[123]));
But i got something like this :
html > body > div#div-id > div.site > div.clearfix > ul.choices > li
But to be totally right, it should look like this :html > body > div#div-id > div.site:nth-child(1) > div.clearfix > ul.choices > li:nth-child(5)
Did someone have any idea to implement it simply in javascript ?

The answer above actually has a bug in it — the while loop breaks prematurely when it encounters a non-element node (e.g. a text node) resulting in an incorrect CSS selector.
Here's an improved version that fixes that problem plus:
Stops when it encounters the first ancestor element with an id assigned to it
Uses nth-of-type() to make the selectors more readable
var cssPath = function(el) {
if (!(el instanceof Element))
return;
var path = [];
while (el.nodeType === Node.ELEMENT_NODE) {
var selector = el.nodeName.toLowerCase();
if (el.id) {
selector += '#' + el.id;
path.unshift(selector);
break;
} else {
var sib = el, nth = 1;
while (sib = sib.previousElementSibling) {
if (sib.nodeName.toLowerCase() == selector)
nth++;
}
if (nth != 1)
selector += ":nth-of-type("+nth+")";
}
path.unshift(selector);
el = el.parentNode;
}
return path.join(" > ");
}

To always get the right element, you will need to use :nth-child() or :nth-of-type() for selectors that do not uniquely identify an element. So try this:
var cssPath = function(el) {
if (!(el instanceof Element)) return;
var path = [];
while (el.nodeType === Node.ELEMENT_NODE) {
var selector = el.nodeName.toLowerCase();
if (el.id) {
selector += '#' + el.id;
} else {
var sib = el, nth = 1;
while (sib.nodeType === Node.ELEMENT_NODE && (sib = sib.previousSibling) && nth++);
selector += ":nth-child("+nth+")";
}
path.unshift(selector);
el = el.parentNode;
}
return path.join(" > ");
}
You could add a routine to check for unique elements in their corresponding context (like TITLE, BASE, CAPTION, etc.).

The two other provided answers had a couple of assumptions with browser compatibility that I ran into. Below code will not use nth-child and also has the previousElementSibling check.
function previousElementSibling (element) {
if (element.previousElementSibling !== 'undefined') {
return element.previousElementSibling;
} else {
// Loop through ignoring anything not an element
while (element = element.previousSibling) {
if (element.nodeType === 1) {
return element;
}
}
}
}
function getPath (element) {
// False on non-elements
if (!(element instanceof HTMLElement)) { return false; }
var path = [];
while (element.nodeType === Node.ELEMENT_NODE) {
var selector = element.nodeName;
if (element.id) { selector += ('#' + element.id); }
else {
// Walk backwards until there is no previous sibling
var sibling = element;
// Will hold nodeName to join for adjacent selection
var siblingSelectors = [];
while (sibling !== null && sibling.nodeType === Node.ELEMENT_NODE) {
siblingSelectors.unshift(sibling.nodeName);
sibling = previousElementSibling(sibling);
}
// :first-child does not apply to HTML
if (siblingSelectors[0] !== 'HTML') {
siblingSelectors[0] = siblingSelectors[0] + ':first-child';
}
selector = siblingSelectors.join(' + ');
}
path.unshift(selector);
element = element.parentNode;
}
return path.join(' > ');
}

Doing a reverse CSS selector lookup is an inherently tricky thing. I've generally come across two types of solutions:
Go up the DOM tree to assemble the selector string out of a combination of element names, classes, and the id or name attribute. The problem with this method is that it can result in selectors that return multiple elements, which won't cut it if we require them to select only one unique element.
Assemble the selector string using nth-child() or nth-of-type(), which can result in very long selectors. In most cases the longer a selector is the higher specificity it has, and the higher the specificity the more likely it will break when the DOM structure changes.
The solution below is an attempt at tackling both of these issues. It is a hybrid approach that outputs a unique CSS selector (i.e., document.querySelectorAll(getUniqueSelector(el)) should always return a one-item array). While the returned selector string is not necessarily the shortest, it is derived with an eye towards CSS selector efficiency while balancing specificity by prioritizing nth-of-type() and nth-child() last.
You can specify what attributes to incorporate into the selector by updating the aAttr array. The minimum browser requirement is IE 9.
function getUniqueSelector(elSrc) {
if (!(elSrc instanceof Element)) return;
var sSel,
aAttr = ['name', 'value', 'title', 'placeholder', 'data-*'], // Common attributes
aSel = [],
// Derive selector from element
getSelector = function(el) {
// 1. Check ID first
// NOTE: ID must be unique amongst all IDs in an HTML5 document.
// https://www.w3.org/TR/html5/dom.html#the-id-attribute
if (el.id) {
aSel.unshift('#' + el.id);
return true;
}
aSel.unshift(sSel = el.nodeName.toLowerCase());
// 2. Try to select by classes
if (el.className) {
aSel[0] = sSel += '.' + el.className.trim().replace(/ +/g, '.');
if (uniqueQuery()) return true;
}
// 3. Try to select by classes + attributes
for (var i=0; i<aAttr.length; ++i) {
if (aAttr[i]==='data-*') {
// Build array of data attributes
var aDataAttr = [].filter.call(el.attributes, function(attr) {
return attr.name.indexOf('data-')===0;
});
for (var j=0; j<aDataAttr.length; ++j) {
aSel[0] = sSel += '[' + aDataAttr[j].name + '="' + aDataAttr[j].value + '"]';
if (uniqueQuery()) return true;
}
} else if (el[aAttr[i]]) {
aSel[0] = sSel += '[' + aAttr[i] + '="' + el[aAttr[i]] + '"]';
if (uniqueQuery()) return true;
}
}
// 4. Try to select by nth-of-type() as a fallback for generic elements
var elChild = el,
sChild,
n = 1;
while (elChild = elChild.previousElementSibling) {
if (elChild.nodeName===el.nodeName) ++n;
}
aSel[0] = sSel += ':nth-of-type(' + n + ')';
if (uniqueQuery()) return true;
// 5. Try to select by nth-child() as a last resort
elChild = el;
n = 1;
while (elChild = elChild.previousElementSibling) ++n;
aSel[0] = sSel = sSel.replace(/:nth-of-type\(\d+\)/, n>1 ? ':nth-child(' + n + ')' : ':first-child');
if (uniqueQuery()) return true;
return false;
},
// Test query to see if it returns one element
uniqueQuery = function() {
return document.querySelectorAll(aSel.join('>')||null).length===1;
};
// Walk up the DOM tree to compile a unique selector
while (elSrc.parentNode) {
if (getSelector(elSrc)) return aSel.join(' > ');
elSrc = elSrc.parentNode;
}
}

I somehow find all the implementations unreadable due to unnecessary mutation. Here I provide mine in ClojureScript and JS:
(defn element? [x]
(and (not (nil? x))
(identical? (.-nodeType x) js/Node.ELEMENT_NODE)))
(defn nth-child [el]
(loop [sib el nth 1]
(if sib
(recur (.-previousSibling sib) (inc nth))
(dec nth))))
(defn element-path
([el] (element-path el []))
([el path]
(if (element? el)
(let [tag (.. el -nodeName (toLowerCase))
id (and (not (string/blank? (.-id el))) (.-id el))]
(if id
(element-path nil (conj path (str "#" id)))
(element-path
(.-parentNode el)
(conj path (str tag ":nth-child(" (nth-child el) ")")))))
(string/join " > " (reverse path)))))
Javascript:
const isElement = (x) => x && x.nodeType === Node.ELEMENT_NODE;
const nthChild = (el, nth = 1) => {
if (el) {
return nthChild(el.previousSibling, nth + 1);
} else {
return nth - 1;
}
};
const elementPath = (el, path = []) => {
if (isElement(el)) {
const tag = el.nodeName.toLowerCase(),
id = (el.id.length != 0 && el.id);
if (id) {
return elementPath(
null, path.concat([`#${id}`]));
} else {
return elementPath(
el.parentNode,
path.concat([`${tag}:nth-child(${nthChild(el)})`]));
}
} else {
return path.reverse().join(" > ");
}
};

There are some js libraries that do exactly this:
https://github.com/antonmedv/finder
https://github.com/gmmorris/simmerjs
I am using the first one and with success so far

function cssPath (e, anchor) {
var selector;
var parent = e.parentNode, child = e;
var tagSelector = e.nodeName.toLowerCase();
while (anchor && parent != anchor || !anchor && parent.nodeType === NodeTypes.ELEMENT_NODE) {
var cssAttributes = ['id', 'name', 'class', 'type', 'alt', 'title', 'value'];
var childSelector = tagSelector;
if (!selector || parent.querySelectorAll (selector).length > 1) {
for (var i = 0; i < cssAttributes.length; i++) {
var attr = cssAttributes[i];
var value = child.getAttribute(attr);
if (value) {
if (attr === 'id') {
childSelector = '#' + value;
} else if (attr === 'class') {
childSelector = childSelector + '.' + value.replace(/\s/g, ".").replace(/\.\./g, ".");
} else {
childSelector = childSelector + '[' + attr + '="' + value + '"]';
}
}
}
var putativeSelector = selector? childSelector + ' ' + selector: childSelector;
if (parent.querySelectorAll (putativeSelector).length > 1) {
var siblings = parent.querySelectorAll (':scope > ' + tagSelector);
for (var index = 0; index < siblings.length; index++)
if (siblings [index] === child) {
childSelector = childSelector + ':nth-of-type(' + (index + 1) + ')';
putativeSelector = selector? childSelector + ' ' + selector: childSelector;
break;
}
}
selector = putativeSelector;
}
child = parent;
parent = parent.parentNode;
}
return selector;
};

Better late than never: I came to this question and tried to use the selected answer, but in my case, it didn't worked because it wasn't very specific for my case. So I decided to write my own solution - I hope it may help some.
This solution goes like this: tag.class#id[name][type]:nth-child(?), and targeted with >.
function path(e) {
let a = [];
while (e.parentNode) {
let d = [
e.tagName.toLowerCase(),
e.hasAttribute("class") ? e.getAttribute("class") : "",
e.hasAttribute("id") ? e.getAttribute("id") : "",
e.hasAttribute("name") ? e.getAttribute("name") : "",
e.hasAttribute("type") ? e.getAttribute("type") : "",
0 // nth-child
];
// Trim
for (let i = 0; i < d.length; i++) d[i] = typeof d[i] == "string" ? d[i].trim() : d[i];
if (d[1] != "") d[1] = "."+d[1].split(" ").join(".");
if (d[2] != "") d[2] = "#"+d[2];
if (d[3] != "") d[3] = '[name="'+d[3]+'"]';
if (d[4] != "") d[4] = '[type="'+d[4]+'"]';
// Get child index...
let s = e;
while (s) {
d[5]++;
s = s.previousElementSibling;
}
d[5] = d[5] != "" ? ":nth-child("+d[5]+")" : ":only-child";
// Build the String
s = "";
for (let i = 0; i < d.length; i++) s += d[i];
a.unshift(s);
// Go to Parent
e = e.parentNode;
}
return a.join(">");
}
I know it's not that readable (I use it in my messy code), but it will give you the exact element(s) you're looking for. Just try it.