Get CSS Path from Dom Element

Get CSS path from Dom element

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.).

Get element's CSS selector (when it doesn't have an id)

Use FireFox with FireBug installed.

• Right-click any element
• Select "Inspect Element"
• Right click the element in the HTML tree
• Select "Copy XPath" or "Copy CSS Path"

Output for the permalink to this answer (XPath):

/html/body/div[4]/div[2]/div[2]/div[2]/div[3]/table/tbody/tr/td[2]/table/tbody/tr/td/div/a

CSS Path:

html body.question-page div.container div#content div#mainbar div#answers div#answer-4588287.answer table tbody tr td table.fw tbody tr td.vt div.post-menu a

---

But regarding this comment:

my final intent is to create a css
selector for the object ...

If that is your intent, there may be an easier way through JavaScript:

var uniquePrefix = 'isThisUniqueEnough_';
var counterIndex = 0;
function addCssToElement(elem, cssText){
    var domId;
    if(elem.id)domId=elem.id;
    else{
        domId = uniquePrefix + (++counterIndex);
        elem.id = domId;
    }
    document.styleSheets[0].insertRule("#"+domId+"{"+cssText+"}");
}

The last line may need to be implemented differently for different browsers. Did not test.

access an element through CSS Path from outside of iframe

Try this: $('#scaled_frame').contents().find(domPath).click();

Is there any way to get dom path from inspector?

I'm using Firefox 57. This is possible by right-clicking an element, Copy -> CSS Path.

Alternatively, you can use the CSS Selector option to get a unique selector for that specific element.

How to generate unique css selector for DOM element?

let say you have a list of links for the sake of simplicity: you can simply pass the index of the triggering element in the collection of all elements

<a href="#">...</a>
<a href="#">...</a>    
<a href="#">...</a>

the js (jQuery 1.7+, I used .on()otherwise use bind()) function can be

var triggers = $('a');
triggers.on('click', function(e) {
   e.preventDefault();
   var index = triggers.index($(this));
   /* ajax call passing index value */
});

so that if you click on third element index value passed will be 2. (0-based index);
of course this is valid as long as the code (the DOM) doesn't change. Later you can use that index to create a css rule to that element e.g. using :nth-child

Otherwise if each one of your elements have a different attribute (like an id) you can pass that attribute

example on JsFiddle : http://jsfiddle.net/t7J8T/

---

Related Topics