How to select a Selector in CSS file by JS

Question

I have this selector in my CSS file. I want to remove it from CSS file with JS. I have the exact DOM element which is Equal to the CSS selector .debtor-content label[for=amount].

CSS code is for the pointed text

I am making an app with JS.

//CSS
.debtor-content label[for=amount]::after
{
  content: 'Insufficient Money';
  font-size: 10px;
  font-weight: bold;
  color: red;
  margin-left: 6px;
  background-color: yellow;
  padding: 1px 2px;

  position: absolute;
  top: 46px;
  right: 58px;
}

You can remove the whole class, using `element.classList.remove('debtor-content');`, but this will remove *ALL* styles associated with that class, including the styles for the `label[for=amount]::after` pseudo-element. — Sally loves Lightning, Jul 26 '23 at 22:41
@Sally-loves-Lightning yes i know but i just want to remove the content of the element. — Mostafa Saleh, Jul 26 '23 at 22:43
What problem are you trying to solve? Folks seeking to modify stylesheets with code are often unaware of the correct way to accomplish what they're after. Be sure you're not asking an [XY question](http://xyproblem.info). — isherwood, Jul 26 '23 at 22:50
Use ```document.querySelector('.debtor-content label[for=amount]')``` — Md. Rakibul Islam, Jul 26 '23 at 22:53
i dont want add an specific id or class for element i did this many time. i want to know is it possible to select a selector in css which has pseudo-element with js and then put the display to none . — Mostafa Saleh, Jul 26 '23 at 22:53
[Changing CSS pseudo-element styles via JavaScript](https://stackoverflow.com/q/4481485/1264804) — isherwood, Jul 26 '23 at 22:55

score 0 · Answer 1 · answered Jul 26 '23 at 23:28

I am also not sure about the motivation and whether this is the right solution of your problem, but if you really need to alter the style with JavaScript, you can sift through all rules of all styleSheets and then "put the display to none" for some:

for (const sheet of document.styleSheets)
  for (const rule of sheet.rules)
    if (rule?.selectorText?.endsWith('::after'))
      rule.style.setProperty('display', 'none')

p::before { content: "H" }
p::after { content: "o" } /* <- will be removed by JS */

<p>ell</p>

thank you, i found an easier way, but really nice to know your solution. — Mostafa Saleh, Jul 26 '23 at 23:46

Mostafa Saleh · Answer 2 · 2023-07-26T23:59:38.293

0

I didn't find a solution as I wanted, something like this:

document.querySelector('.debtor-content label[for=amount]::after').style.display = 'none';

but instead i found this:

:root{
 --display-state: none;
}

.debtor-content label[for=amount]::after{
  content: 'Insufficient Money';
  font-size: 10px;
  font-weight: bold;
  color: red;
  margin-left: 6px;
  background-color: yellow;
  padding: 1px 2px;

  position: absolute;
  top: 46px;
  right: 58px;

 //new code
  display: var(--display-state);
}

js:

document.querySelector(':root').style.setProperty('--display-state', 'block');

thanks all for helping me.

result

edited Jul 26 '23 at 23:59

answered Jul 26 '23 at 23:45

Mostafa Saleh

1
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 30 '23 at 11:09

How to select a Selector in CSS file by JS

2 Answers2