38

I'm trying to modify a page through JavaScript/CSS (much like Stylish or Greasemonkey do). This is a very complex page (that I didn't build, or can't modify pre-render), which makes constructing the CSS selector hard to do (manually looking at document structure). How can I achieve this?

Improve this question
5
  • Sorry, but how can you identify the element? Or do you mean build full DOM tree? Commented Jan 3, 2011 at 20:39
  • my final intent is to create a css selector for the object. i can look at the pages code and deduct this path by looking at the document (sample selector from gmail.com "div.nH.T4.pp + div.pp + div.nH.pp.ps.TZ"), i'd like a way to help me build the selector. Commented Jan 3, 2011 at 20:46
  • Hey rcphq did u find any solution for this problem I am also searching for same thing. Commented Jun 7, 2012 at 3:39
  • Why not either use it's id if it has one, or just assign it a new id if it does not have one? Commented Nov 21, 2012 at 22:37
  • This is a more complex problem than it seems and there are good libraries that solve it. Also, it's a duplicate of Getting a jQuery selector for an element. Commented Aug 26, 2015 at 5:05

6 Answers 6

Reset to default
69 
function fullPath(el){
  var names = [];
  while (el.parentNode){
    if (el.id){
      names.unshift('#'+el.id);
      break;
    }else{
      if (el==el.ownerDocument.documentElement) names.unshift(el.tagName);
      else{
        for (var c=1,e=el;e.previousElementSibling;e=e.previousElementSibling,c++);
        names.unshift(el.tagName+":nth-child("+c+")");
      }
      el=el.parentNode;
    }
  }
  return names.join(" > ");
}

console.log(  fullPath( $('input')[0] ) );
// "#search > DIV:nth-child(1) > INPUT:nth-child(1)"

This seems to be what you are asking for, but you may realize that this is not guaranteed to uniquely identify only one element. (For the above example, all the sibling inputs would be matched as well.)

Edit: Changed code to use nth-child instead of CSS classes to properly disambiguate for a single child.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

nice succinct pure js function :) Just a slight note that the :nth-child wont work when applied to the HTML tag... or at least I can't get it to work in Firefox or Chrome... I guess it's probably due to the fact that <html> has no parent.
no problem, it's not something I would have thought about either :) I've submitted a subtle edit changing "HTML" to "html" in your new revision... due to the .toLowerCase() method.
Note that since CSS selectors do not allow selecting DOM text nodes, this code will produce wrong result in such case (el.tagName will give undefined).
Not bad... might want to package it into a library, or maybe improve one of the 10+ ones that do the same thing.
This will work nicely until they prepend another child, which is the inherent problem with nth-child() selectors. I would derive a selector using specificity instead.
|
22

I found I could actually use this code from chrome devtools source to solve this, without that many modifications.

After adding relevant methods from WebInspector.DOMPresentationUtils to new namespace, and fixing some differences, I simply call it like so:

> UTILS.cssPath(node)

For implementation example see css_path.js

Improve this answer

5 Comments

This is by far the best solution I have found. I published it on npm for convenience: npmjs.com/package/cssman
@Macks: might you be willing to publish the source on GitHub?
Actually the Chromium code produces a lot of non-unique selectors.
If by non unique you mean the produced selector should return 1 and only 1 element, it was never explicitly asked for by op. But should be fairly easy to modify code to check for siblings and get index or other distinct attribute
Why would it produce non-uniques? I thought it did n-th child things?
19

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.

Improve this answer

1 Comment

Thanks, i was using chrome's version of firebug (lite) and couldn't find this option. Worked like a charm.
6

Check this CSS selector generator library @medv/finder

  • Generates shortest selectors
  • Unique selectors per page
  • Stable and robust selectors
  • 2.9 kB gzip and minify size

Example of generated selector:

.blog > article:nth-child(3) .add-comment
Improve this answer

Comments

4 

function getCssSelector(el)
{
    names = [];
    do {
        index = 0;
        var cursorElement = el;
        while (cursorElement !== null)
        {
            ++index;
            cursorElement = cursorElement.previousElementSibling;
        };
        names.unshift(el.tagName + ":nth-child(" + index + ")");
        el = el.parentElement;
    } while (el !== null);

    return names.join(" > ");
}

Improve this answer

1 Comment

Any thoughts on why it doesn't work in Safari?
0

you can use for css first-child pseudo classes if the element is a first child in a div table or body..etc

you can use jquery's nth child() function.

http://api.jquery.com/nth-child-selector/

example from jquery.com

<!DOCTYPE html>
<html>
<head>
  <style>

  div { float:left; }
  span { color:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
  <div><ul>
    <li>John</li>
    <li>Karl</li>
    <li>Brandon</li>

  </ul></div>
  <div><ul>
    <li>Sam</li>
  </ul></div>

  <div><ul>
    <li>Glen</li>
    <li>Tane</li>
    <li>Ralph</li>

    <li>David</li>
  </ul></div>
<script>$("ul li:nth-child(2)").append("<span> - 2nd!</span>");</script>

</body>
</html>

my 2 cents if I understood the question correctly.

Improve this answer

1 Comment

this would work, but im doing this on a page i didnt build so id need to somehow get what "nth-child" it is. this is my main problem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.