How to get this CSS element using JavaScript (.questions label:before)?

Question

In a CSS file, I have the following code.

.questions label:before {
content: attr(letter);
display: inline-block;
color: gray;
}

Using JavaScript only (jQuery not preferred), I want to make some changes to this CSS element like make the color white instead of gray.

If we were dealing only with a class name like .questions, we could do something like document.getElementsByClassName("questions").style.color = "white"; But I want to select the entire .questions label:before using JavaScript.

you can use `document.querySelector('.questions label:before').style.color = // whatever` — mattdevio, Dec 30 '17 at 10:46
Possible duplicate of [Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery](https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin) — Nisarg Shah, Dec 30 '17 at 10:51
@magreenberg [Selectors API Level 1 - Grammar](https://www.w3.org/TR/selectors-api/#grammar): _"Authors are advised that while the use of pseudo-elements in selectors is permitted, they **will not match any elements in the document**, and thus would not result in any elements being returned."_ — Andreas, Dec 30 '17 at 10:53
@magreenberg are you sure, did you try ? :) .. and you got upvoted too .. — Temani Afif, Dec 30 '17 at 10:54

score 1 · Accepted Answer · answered Dec 30 '17 at 10:57

Instead of changing the CSS you can simply override it with another as you cannot manipulate pseudo element using JS/jQuery because they are not a part of the DOM as you can read here : https://stackoverflow.com/a/21709814/8620333

document.querySelector('.questions label').classList.add('newclass');

.questions label:before {
  content: attr(letter);
  display: inline-block;
  color: gray;
}

label.newclass:before {
  color: red;
}

<div class="questions">
  <label letter="content ">text text</label>
</div>

Thank you :) It seems to be the simplest solution. Also, thanks to all others who contributed. — NoobCoder, Dec 30 '17 at 11:22

Niklesh Raut · Answer 2 · 2017-12-30T11:10:02.237

Use computed property to get :before value,

var color = window.getComputedStyle(
 document.querySelector('.questions label'), ':before'
).getPropertyValue('color');
console.log(color);

function changeColor(){
    var elem = document.head.appendChild(document.createElement("style"));
    var colors = ['green','blue','red'];
    elem.innerHTML = ".questions label:before {color: "+getRandom(colors)+";}";
}

function getRandom(colors){
  var random = Math.floor(Math.random() * colors.length);
  return colors[random];
}

.questions label:before {
content: attr(letter);
display: inline-block;
color: rgb(255, 0, 0);
}

<div class='questions'>
Best
<label letter='one'> Test</label>
West
</div>

<input type="button" value="Change" onclick="changeColor()">

I found this source here

but user ask how to change it – Temani Afif Dec 30 '17 at 10:55 — Temani Afif, Dec 30 '17 at 10:55

score 0 · Answer 3 · answered Dec 30 '17 at 11:05

There are many ways to do that here's one

var yourcss = '.questions label:before{ background-color: green }';
var yourstyle = document.createElement('style');

if (yourstyle.styleSheet) {
    yourstyle.styleSheet.cssText = yourcss;
} else {
    yourstyle.appendChild(document.createTextNode(yourcss));
}

document.getElementsByTagName('head')[0].appendChild(yourstyle);

.questions label:before {
content: attr(letter);
display: inline-block;
color: gray;
}

<div class="questions">
  <label letter="green ">Hello World!</label>
</div>

How to get this CSS element using JavaScript (.questions label:before)?

3 Answers3