Is there a way to use variable CSS selector which can selectively apply css to html element which has classes which is a variable?

Question

I have say 3 spans as below :

<span  class = "testVar1" onClick = "testFunction(Var1)">
<span  class = "testVar2" onClick = "testFunction(Var2)">
<span  class = "testVar3" onClick = "testFunction(Var3)">
testFunction(var){
    here I assign class "on" to the span which calls this function
}

If span with class testVar1 calls this then it becomes

<span  class = "testVar1 on" onClick = "testFunction(Var1)"></span>

My Css is as below

.test .on {
    some CSS
}

Is there a way in CSS where I can use a variable and apply css to those span which is clicked? Like

.test[Var1 or Var2 or Var3] .on {
    some CSS
}

I have achieved it by using multiple selectors manually like#

.testVar1 .on {
    some CSS
}
.testVar2 .on {
    some CSS
}

I have read the post Using regular expression in css? , it,s helpful but not answering my question.

In this post css is applied to all the element, but I want css to be applied only to the element which called the function. and so on.

Any help or pointers would be appreciated! Thanks!

Instead of `testFunction(Var1)` you can simply do `testFunction(this)`. On each of your spans. No matter if 3 or 100000. — connexo, Apr 27 '20 at 00:20
a *perfect* duplicate of : https://stackoverflow.com/q/8903313/8620333 — Temani Afif, Apr 27 '20 at 00:39

connexo · Accepted Answer · 2020-04-27T00:20:14.287

You are making things too complicated. Just use the same CSS class on all of them, then add the click listener programmatically, not as an inline onlick listener:

document.querySelectorAll('span.test').forEach(
  span =>
  span.addEventListener('click', () => {
      console.log(`you clicked ${span.innerText}`) 
      span.classList.toggle('on')
  })
)

.test {
  background: red;
  color: white;
  display: inline-block;
  padding: 40px;
}

.test.on {
  background: green;
}

<span class="test">foo</span>
<span class="test">bar</span>
<span class="test">baz</span>

If you insist on inline event listeners (you really shouldn't, it's widely considered bad practice), for this simple example it's probably even easier:

function foobar(span) {
  console.log(`you clicked ${span.innerText}`)
  span.classList.toggle('on')
}

.test {
  background: red;
  color: white;
  display: inline-block;
  padding: 40px;
}

.test.on {
  background: green;
}

<span class="test" onclick="foobar(this)">foo</span>
<span class="test" onclick="foobar(this)">bar</span>
<span class="test" onclick="foobar(this)">baz</span>

It worked! Infact I was going with a complicated logic. There is no need to use multiple classes. — Sallu, Apr 27 '20 at 00:55

A. Meshu · Answer 2 · 2020-04-27T00:29:42.563

You can use regex selector: span[class^='test'] which means select every span with class start with "test". You can combine it with another class (.on) like that: span[class^='test'].on

As for inline code, you can do something like that:

const spans = document.querySelectorAll('span[class^="test"]'); // select all spans
for (var i=0; i < spans.length; i++) { // iterate them
  spans[i].addEventListener('click',function() { // add event listener to them
this.classList.add('on'); // set class on click
  });
}

span[class^='test'] {color: blue;}
span[class^='test'].on { color: red;  }

<span class="testVar1">1</span>
<span class="testVar2">2</span>
<span class="testVar3">3</span>

Check this for selecting element with more then one class. And this for regExp selector. Enjoy code!

Is there a way to use variable CSS selector which can selectively apply css to html element which has classes which is a variable?

2 Answers2