Question 282667 in CSS Question posted in
Some basic documentation can be found here.

CSS styling determined by variable (number) in class name

Is it possible to filter in css based on class name containing numbers?
Part of my html consists of code from external source which looks something like this:

<g>
   <circle r="7" class="actor-0" cy="60" cx="20"></circle>
   <circle r="7" class="actor-1" cy="60" cx="20"></circle>
</g>
...
<g>
   ...
   <circle r="7" class="actor-2" cy="60" cx="20"></circle>
</g>
...
<g>
   <circle r="7" class="actor-1" cy="60" cx="20"></circle>
   <circle r="7" class="actor-2" cy="60" cx="20"></circle>
</g>

The numbers in actor names just keep increasing. I need to style them in some way and I would like to have them repeat colors for every n actors.
So actor-0, actor-3, actor-7, … is lets say red
then actor-1, actor-4, actor-8, … is lets say yellow and so on.

These circles are sprinkled also randomly in the HTML so they are not in single div therefore I can’t use the :nth-child() option.

Maybe if there was a way to match actor and ending number of class name…

Is that doable in any way?

Tags:

2

Answers


  1. 0

    Directly targeting CSS class names with a pattern that includes incrementing numbers isn’t possible with plain CSS. However, you can use a combination of JavaScript and CSS to achieve the desired effect.

    The idea is to use JavaScript to loop through the elements and apply a class based on the number in their class name. Then, you can define CSS rules for these applied classes.

    Here’s an example approach:

    1- JavaScript to Assign Classes Based on Pattern:

    document.querySelectorAll('[class^="actor-"]').forEach(el => {
    const num = parseInt(el.className.match(/actor-(d+)/)[1], 10);
    el.classList.add('color-group-' + (num % 3)); // Change '3' to however many color groups you want
});

    This script selects all elements whose class begins with actor-, extracts the number, and then adds a new class based on the modulo operation. For example, if you have 3 color groups, actor-0, actor-3, actor-6, etc., will all get color-group-0 class.

    2- CSS to Style Based on New Classes:

    .color-group-0 { color: red; }
.color-group-1 { color: yellow; }
.color-group-2 { color: blue; }
/* Add more styles for additional color groups if needed */

    This approach ensures that the coloring is dynamic and can handle an arbitrary number of actors. You just need to run the JavaScript after the page loads, and it will automatically categorize each actor into a color group.

    Login or Signup to reply.
  2. 0

    This is a solution involving javascript that will grab all elements having a class starting with actor- and will apply a color cycling through an pre defined set:

    //available colors to cycle
const colors = ['red', 'green', 'blue'];
//elements matching the selector (circle having class starting with actor-
const actors = document.querySelectorAll('circle[class^="actor-"]');

//for each actor
actors.forEach(actor => {

  //get the actor number
  const number = parseInt(actor.className.baseVal.match(/actor-(d+)/)[1], 10);
  
  //sets the color according to the actor number
  actor.style.fill = colors[number % colors.length];
});
    svg{
  border: solid 1px black;
}
    <svg viewBox="0 0 60 30" xmlns="http://www.w3.org/2000/svg">
  
  <g>
     <circle r="5" class="actor-0" cy="10" cx="10"></circle>     
     <circle r="5" class="actor-1" cy="10" cx="20"></circle>
     <circle r="5" class="actor-2" cy="10" cx="30"></circle>
     <circle r="5" class="actor-3" cy="10" cx="40"></circle>  
     <circle r="5" class="actor-4" cy="10" cx="50"></circle>     
  </g>  
  
  <g>
     <circle r="5" class="actor-5" cy="20" cx="10"></circle>     
     <circle r="5" class="actor-6" cy="20" cx="20"></circle>
     <circle r="5" class="actor-7" cy="20" cx="30"></circle>
     <circle r="5" class="actor-8" cy="20" cx="40"></circle>  
     <circle r="5" class="actor-9" cy="20" cx="50"></circle>     
  </g>  
  
</svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search