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


Tags: javascript,html,css

Problem :

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?



Solution :

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


    CSS Howto..

    How can i get target with a hover an element under an element?

    CSS- How'd they do that without Absolute Positioning and Z-index?

    how to add css file to node js(not express) code

    Show tooltip content when its hovers

    I can't make the a Background image display & and can't figure out how to fit text into the image

    How to add a value in the y-axis at the bottom of a bar chart-css

    How to float left without wrapping to next line?

    How do I make my CSS link up to files in different directories

    How to hide specific TD borders in a TABLE using CSS

    Javascript: How can I undo the setting of element.style?

    css ul li nested menu with a padding. How on hoover retain width of the menu?

    How to avoid css and scripting effect when input on textbox

    How to hide a CSS media query from print? “not” logical operator does not work

    CSS - how to avoid class= for every single paragraph?

    How to do CSS wild card search? [duplicate]

    How Do I set this PHP printed HTML form to stay within

    tags?

    Keyboard Showed messed up elements' position

    How to change a defined value to a unspecified value by css?

    CSS delivery optimization: How to defer css loading?

    How to show only the top portion of an image with CSS?

    How to Modify the StrongLoop's LoopBack Explorer CSS

    How can I use jQuery to create a csv of all checked checkboxes associated text?

    How to call a CSS file from the right place

    How to make compatibale a css design for all the browsers?

    showing a css component for a specified number of seconds

    How to add text with css without pseudo-element

    How to style an embedded jsp inside another jsp?

    How to position multiple elements on one line, if they are in an absolute element?

    How to highlight a whole table cell with padding when hovering?

    Given an url, how could a script find what resources are loaded?