I'm trying to make a greasemonkey userscript that will work in Twitter conversations
and will colorize with the same color
the name+username of each poster plus each relevant
@reply inside each tweet,
in order to easier distinguish which tweet replies to which one.
As I've examined the HTML code of the above conversation,
the CSS path(-in Chrome-, in Firefox's Inspector it's called 'unique selector)
of eg, the name of the first replier is:
#stream-items-id > li:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > strong:nth-child(2)
So, my question is: how can I apply to each such specific element a CSS property like:
You can use querySelector to get the (first) element that matches the selector. If it is, like you say, a unique selector, that should be all you need. Otherwise, you might use querySelectorAll to get all items that match the selector.
Of course, if the element would have an id, or if you know there is always at most one link, or div at a certain level, you could omit the
nth-child additions. Those are added by FireFox to make the selector truly unique, but if you know the structure, they are not always needed.
// Get first element matching the selector. Use querySelectorAll to get all of them. var element = document.querySelector('#stream-items-id > li:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > strong:nth-child(2)'); element.style.color = 'red';
But usually you wouldn't need such a specific selector