Regex-like CSS Attribute Selector Wildcard Capture

Question

Let's say I have the following HTML:

<div class="tocolor-red">    tocolor </div>
<div class="tocolor-blue">   tocolor </div>
<div class="tocolor-green">  tocolor </div>
<div class="tocolor-yellow"> tocolor </div>

Instead of having to repeat CSS code like the snippet below for each color...

.tocolor-red{
  background: red;
}
.tocolor-red::before {
  content: "red";
}

... is there a way to write a CSS rule that captures the color from the css class instead? For the sake of due diligence, I've looked up attribute selectors already and I've noticed that there are a number of ways you can use wildcards in css already. However, I haven't found anything that would allow me to capture the wildcard text and as part of a rule.

If regex worked for CSS, the rule would look something like this:

.tocolor-([\w+]) {
   background: $1;
}
.tocolor-([\w+]:before {
   content: $1;
}

you cannot actually use the attribute value of an html attribute as a value for a css rule, but using sass or less you can generate each rules needed in loop — G-Cyrillus
– G-Cyrillus, Commented Oct 26, 2015 at 19:52
Css isn't really able to do this. As you are already suggesting you might need languages that compile to css (less, sass, scss) but then you have to ad the rule for every color. — Rik
– Rik, Commented Oct 26, 2015 at 19:56
@cimmanon A sass example :) blackfalcon.roughdraft.io/… so it generates the rules you need but of course it will not extract anything from the html . Just use an efficient method or the right tools ;) — G-Cyrillus
– G-Cyrillus, Commented Oct 26, 2015 at 20:01

David Thomas · Accepted Answer · 2015-10-26 20:08:07Z

CSS has no means to support regular expression captures, while you could select all elements with a class that begins with the string tocolor-, CSS has no means of capturing the value of the string to apply it to a rule.

Incidentally, and somewhat belatedly, one way to do this with JavaScript:

// retrieve all elements containing the string 'tocolor-':
var elements = document.querySelectorAll('[class*="tocolor-"]'),

// declaring two variables for use in later loops:
    classes, colorString;

// iterating over the (Array-like) collection of elements,
// using Function.prototype.call() to be able to apply the
// Array.prototype.forEach() method on the collection:
Array.prototype.forEach.call(elements, function (elem) {
    // 'elem' is the individual node of the collection
    // over which we're iterating.

    // creating an Array of the classes from the element:
    classes = Array.prototype.slice.call(elem.classList, 0);

    // creating a new Array, using Array.prototype.map():
    colorString = classes.map(function (c) {
        // 'c' is the specific class of the Array of classes
        // over which we're iterating.

        // if the current class ('c') begins with the string
        // 'tocolor-' then we return that class
        if (c.indexOf('tocolor-') === 0) {

            // after first replacing the 'tocolor-' string
            // with an empty string:
            return c.replace('tocolor-','');
        }
    });

    // setting the color of the element ('elem') to
    // the string found:
    elem.style.color = colorString;
});

var elements = document.querySelectorAll('[class*="tocolor-"]'),
  classes, colorString;
Array.prototype.forEach.call(elements, function(elem) {
  classes = Array.prototype.slice.call(elem.classList, 0);
  colorString = classes.map(function(c) {
    if (c.indexOf('tocolor-') === 0) {
      return c.replace('tocolor-', '');
    }
  });
  elem.style.color = colorString;
});

<div class="tocolor-red">tocolor</div>
<div class="tocolor-blue">tocolor</div>
<div class="tocolor-green">tocolor</div>
<div class="tocolor-yellow">tocolor</div>

Unfortunately I can't help with SASS, since I've never really used it.

Lucas Rodrigues · Accepted Answer · 2015-10-26 19:52:36Z

0

Here's your wildcard:

div[class^='.tocolor-'] {
    background: red;
}

But if you are looking to use variables, you should take a look at SASS:

http://sass-lang.com/

edited Oct 26, 2015 at 19:52

answered Oct 26, 2015 at 19:50

Lucas Rodrigues

1,1922 gold badges11 silver badges23 bronze badges

2 Comments

S. Dixon Over a year ago

Ah, but what if I want tocolor-blue to show me blue instead, without having to write a second rule?

Lucas Rodrigues Over a year ago

if you are looking to use variables on selectors, you should take a look at SASS: sass-lang.com

Collectives™ on Stack Overflow

Regex-like CSS Attribute Selector Wildcard Capture

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related