styling pseudo element

what's wrong with this code..why does it show error? html

  <div class="div"></div>

  <div class="div"></div>

css

.div::before{
  content: "";
  height: 100px;
  width: 100px; 
  background: red;
  position: absolute;
}

.div::before{
  content: "";
  height: 100px;
  width: 100px; 
  background: red;
  position: absolute;
}

let div = document.querySelector('.div');

let divBefore = window.getComputedStyle(div,'::before');

divBefore.background = 'blue'

let div = document.querySelector('.div');

let divBefore = window.getComputedStyle(div,'::before');

divBefore.background = 'blue'

18 Replies

13eck•2y ago

Because getComputedStyle() returns a read-only object. You can't write to it.

glutonium•2y ago

hmm..i searched a bit more. found out u can use css variables but yaa.. it's working now fortunately

WebMechanic•2y ago

of course you can, they inherit into pseudos just like any other child element.

13eck•2y ago

If you want to change CSS styles you need to modify the base element, as you can't target pseudo elements with JS

glutonium•2y ago

yaa..i got that xD

WebMechanic•2y ago

to change the runtime style in JS get the element's .style property and use setProperty() on this object getComputedStyle() is only to read what eventually affects the rendering

glutonium•2y ago

hmmm.. that's why we do with variables we set variables for the child give the value to the parent and the child just inherits got it yeee..i did the same..and it worked fine xD

13eck•2y ago

As a proof of concept, throw this into a codepen: HTML

<div class="div"></div>

<div class="div"></div>

CSS

.div {
  --clr: red;
}

.div::before {
  content: "";
  height: 100px;
  width: 100px; 
  background: var(--clr);
  position: absolute;
}

.div {
  --clr: red;
}

.div::before {
  content: "";
  height: 100px;
  width: 100px; 
  background: var(--clr);
  position: absolute;
}

const div = document.querySelector('.div');
setTimeout(() => {
  div.style.setProperty("--clr", "blue");
}, 1500);

const div = document.querySelector('.div');
setTimeout(() => {
  div.style.setProperty("--clr", "blue");
}, 1500);

You'll see the box start off life red and change to blue after a second and a half. As you said, the trick is using custom properties.

glutonium•2y ago

hmm..i think it would work even without declaring the variable on the .div in css i think setProperty () will take care of that shouldn't it?

13eck•2y ago

It would, but you need something there to start with otherwise the background of the element is none

glutonium•2y ago

and yaa.. it's working as intended xD

13eck•2y ago

I followed what your code looked like you wanted to do Start red, end up blue I could have done background: var(--clr, red); in the ::before selector, though, instead.

glutonium•2y ago

but can't u just do background : var(--clr,red); for the before

13eck•2y ago

lawl, yeppers

glutonium•2y ago

@cvanilla13eck this is what I made at first https://codepen.io/-bloop-/pen/RweNZaN

Tahzib Ebad

CodePen

RweNZaN

...

glutonium•2y ago

but then, i thought what if I just use before and after i can cutt off 2 divs from there then and here i did it with before and after