Conditional if statement with CSS

Question

Is there any way to configure a conditional with CSS?

What I'm trying to configure is, having a single class, if the text on that class change so I can define different colors to the text. For example, if "div class:´test´" have assigned the text "Disabled" I want to apply red color to the text, but if the text for the same class is "Enabled" want to assign green color to the text.

Is there any way to achieve that with only one class?

Welcome to Stack Overflow! No, CSS is content unaware. You cannot style an element with CSS only based on the text within the element. — disinfor, May 05 '22 at 22:17
Thank you so much for your welcome. Sorry for the delay on my response, I got covid, but I'm better now. Gotcha, thank you so much, I'm pretty new to all this world but studying constantly now. — maumotec, May 10 '22 at 20:23

Usiel · Answer 1 · 2022-05-05T22:57:41.797

The closest solution to the one you propose with css is using attribute selectors, an example below

p[data-text="Enabled"]{
   color: blue;
}

p[data-text="Disabled"]{
   color: red;
}

<p data-text="Enabled">Enabled</p>
<p data-text="Disabled">Disabled</p>

But with javascript you can get a solution like the following:

let elemento= document.querySelectorAll(".case")
elemento.forEach(e => e.setAttribute( "data-text",e.textContent ) )

.case[data-text="Enabled"]{
  color:red;
}

<p class="case">Enabled</p>
<p class="case">Disabled</p>

Update: improvement recommended by user @connexo

let elemento= document.querySelectorAll(".case")
elemento.forEach(e => e.dataset.text= e.textContent )

.case[data-text="Enabled"]{
  color:red;
}

<p class="case">Enabled</p>
<p class="case">Disabled</p>

`e.setAttribute( "data-text",e.textContent )` can be shortened significantly if you capitalize on the dataset: `e.dataset.text = e.textContent` — connexo, May 05 '22 at 22:51

score 0 · Answer 2 · answered May 05 '22 at 22:48

Adding to the solution suggested by Usiel, you can also use CSS to display the text in the data-attributes:

[data-text]::before { content: attr(data-text); }

[data-text="Enabled"]{
   color: blue;
}

[data-text="Disabled"]{
   color: red;
}

<p data-text="Enabled"></p>
<p data-text="Disabled"></p>

score -1 · Answer 3 · answered May 05 '22 at 22:17

-1

I think you could achieved this with Javascript. document.getElementById(id).style.property = new style as shown in JavaScript HTML DOM - Changing CSS

answered May 05 '22 at 22:17

jimmymcheung

87
7

From the question: *Is there any way to configure a conditional with CSS?* – connexo May 05 '22 at 22:49

Conditional if statement with CSS

3 Answers3