How to style different colors (auto highlight) to html elements

Question

.one{color:red}
.two{color:blue}
.three{color:yellow}
.four{color:green}

<html>
  <span class="one">1</span>
  <span class="two">2</span>
  <span class="three">3</span>
  <span class="four">4</span>
  <span class="two">2</span>
  <span class="two">2</span>
  <span class="one">1</span>
  <span class="four">4</span>
  <span class="three">3</span>
  <span class="three">3</span>
  <span class="two">2</span>
  <span class="one">1</span>
</html>

I want to display a bunch of text with different colors, here I take number for example. Is there a simple way to highlight different text based on their content, like code editor? Here I have to hard code the css color class.

Unfortunately there's no way to target elements based on their content (see [this question](https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text) for more discussion). If you want to do this automatically, you'll have to turn to JavaScript. — ethan.roday, Nov 24 '18 at 21:23

score 2 · Answer 1 · answered Nov 24 '18 at 21:36

You can use data-attribute that you can target with CSS. You simply change the content of the attribute (like you will do with html content) and the CSS will be applied automatically.

[content]:before {
  content: attr(content);
}

[content="1"] {color: red}

[content="2"] {color: blue}

[content="3"] {color: yellow}

[content="4"] {color: green}

[content="text"] {color: brown}

<span content="1"></span>
<span content="2"></span>
<span content="3"></span>
<span content="4"></span>
<span content="3"></span>
<span content="4"></span>
<span content="2"></span>
<span content="1"></span>
<span content="text"></span>

Just another way of hard coding, obviously JS is a proper solution here. — VXp, Nov 24 '18 at 21:57

Aviad · Answer 2 · 2018-11-24T21:46:55.080

The answer is - JavaScript!

Given some elements on your DOM, one can do the following:

HTML

<span id="mySpan">2</span>

JS

const myColors = {0: 'black', 2: 'red', 3:'green'};
const el = document.getElementById('mySpan');
const spanContent = Number(el.innerText) // el.innerHTML will work here as well
el.style.color = myColors[spanContent];

You can read more here: https://www.w3schools.com/js/js_htmldom_css.asp

EDIT:

For bulk operations, we can do the following:

HTML (note that there's no meaning to the classes, just a copy paste from original Q)

  <span class="one">1</span>
  <span class="two">2</span>
  <span class="three">3</span>
  <span class="four">4</span>
  <span class="two">2</span>
  <span class="two">2</span>
  <span class="one">1</span>
  <span class="four">4</span>
  <span class="three">3</span>
  <span class="three">3</span>
  <span class="two">2</span>
  <span class="one">1</span>

JS

const myColors = {0: 'black', 2: 'red', 3:'green'};
const toNumber = n => Number(n) || 0;
const els = document.getElementsByTag('span');
for(const el of els){ // Using ES6
    el.style.color= myColors[toNumber(el.innerText)] // el.innerHTML will work here as well
}

I would update your solution and change your query selector from `getElementById()` to something that won't limit the use to one element only. — NewToJS, Nov 24 '18 at 21:31

How to style different colors (auto highlight) to html elements

2 Answers2