How to apply a CSS property to an element using it's CSS path in Javascript?

Question

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.

Conversation example link.

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: {color: red;} using Javascript?

GolezTrol · Accepted Answer · 2014-11-26 01:44:52Z

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

Collectives™ on Stack Overflow

How to apply a CSS property to an element using it's CSS path in Javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related