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?
Use FireFox with FireBug installed.
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.
