Is there any way to apply style to span based on content using SASS?

Question

The purpose is to apply css style to a span element using only dynamic SASS style processor and without any javascript/jQuery.

The condition for applying style should be the text inside the span.

Example:

<span>Should be green</span>
<span>Just span</span>
<span>Just span</span>
<span>Just span</span>
<span>Just span</span>
<span>Just span</span>

While researching I did not find any solution.

I know that there are ways to set it simply by using jQuery or JS, but my requirement is to find solution in sass style.

Thank's for any advice !

If the number of spans is known you can use [nth-of-type](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type) — I haz kode, Jul 12 '18 at 11:49
@Ihazkode it is unknown for sad. Just one thing may be used for identification is the text inside the span — Sh. Pavel, Jul 12 '18 at 11:50
In that case you're out of luck because CSS works based on nodes and not based on the contents of the node. You need to use script here. — I haz kode, Jul 12 '18 at 11:51

Ankit Jaiswal · Answer 1 · 2018-07-12T12:17:39.590

You just add a div or class ex:- and give the css to all the span.

.demo-class span {
  display: block;
  font-size: 30px;
}
.demo-class span:nth-of-type(1) {
      color: #008000;
}
.demo-class span:nth-of-type(2) {
      color: #7a73aa;
      font-size: 20px;
}
.demo-class span:nth-of-type(3) {
      color: #ea5f72;
      font-size: 15px;
}
.demo-class span:nth-of-type(4) {
      color: #f1cb06;
}
.demo-class span:nth-of-type(5) {
      color: #7a73aa;
      font-size: 15px;
}
.demo-class span:nth-of-type(6) {
      color: #f1cb06;
}

<div class="demo-class">
  <span>Should be green</span>
  <span>Just span</span>
  <span>Just span</span>
  <span>Just span</span>
  <span>Just span</span>
  <span>Just span</span>
</div>

That's seems to be a good point, thanks ! – Sh. Pavel Jul 12 '18 at 12:22 — Sh. Pavel, Jul 12 '18 at 12:22

Is there any way to apply style to span based on content using SASS?

1 Answers1