CSS Attribute Selector Wildcard Capture Tool

Question

CSS Attribute Selector Wildcard Capture Tool

Suppose I have the following HTML structure:

<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 duplicating CSS code for each color variation like in the example below...

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

... is there a way to create a CSS rule that dynamically assigns the color based on the class name? While exploring attribute selectors and wildcard options, I haven't found a solution that captures the dynamic text from the class.

If regular expressions were applicable in CSS, the rule might resemble something similar to this hypothetical example:

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

javascript css

Answer 1

Answer №1

Although CSS lacks the capability to support regular expression captures, you can still target all elements with a class that starts with the string tocolor-. However, CSS does not have the ability to extract and apply the captured value to a rule.

As an alternative solution, albeit somewhat delayed, consider using JavaScript:

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

// Declaring variables for later use:
    classes, colorString;

// Iterating over the collection of elements,
// utilizing Function.prototype.call() in order to employ
// Array.prototype.forEach() on the collection:
Array.prototype.forEach.call(elements, function (elem) {
    // 'elem' represents each individual node in the collection.

    // Generating an array of 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' denotes the specific class being iterated over.

        // Check if the current class ('c') begins with 'tocolor-',
        // then return that class after removing 'tocolor-' string:
        if (c.indexOf('tocolor-') === 0) {
            return c.replace('tocolor-','');
        }
    });

    // Applying the extracted color as the style of the element ('elem'):
    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>

Answer 2

Although CSS lacks the capability to support regular expression captures, you can still target all elements with a class that starts with the string tocolor-. However, CSS does not have the ability to extract and apply the captured value to a rule.

As an alternative solution, albeit somewhat delayed, consider using JavaScript:

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

// Declaring variables for later use:
    classes, colorString;

// Iterating over the collection of elements,
// utilizing Function.prototype.call() in order to employ
// Array.prototype.forEach() on the collection:
Array.prototype.forEach.call(elements, function (elem) {
    // 'elem' represents each individual node in the collection.

    // Generating an array of 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' denotes the specific class being iterated over.

        // Check if the current class ('c') begins with 'tocolor-',
        // then return that class after removing 'tocolor-' string:
        if (c.indexOf('tocolor-') === 0) {
            return c.replace('tocolor-','');
        }
    });

    // Applying the extracted color as the style of the element ('elem'):
    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>

Answer 3

Answer №2

Your unique element:

span[class*='.custom-'] {
    color: blue;
}

If you want to incorporate variables, consider checking out LESS:

Answer 4

Your unique element:

span[class*='.custom-'] {
    color: blue;
}

If you want to incorporate variables, consider checking out LESS:

CSS Attribute Selector Wildcard Capture Tool

Answer №1

Answer №2

Similar questions

Is it possible to customize the MongoDB Collection before loading the web application by fetching data asynchronously using Promises?

Deselect all child elements when the parent checkbox is not selected

Having issues sorting the ranking table numerically in a Javascript/jQuery/JSON/localStorage game

Utilizing CSS3 webkit-transitions with multiple properties on a div element along with multiple webkit-transition-delays

What exactly does the question mark represent in the code structure as indicated in VSCode?

The textbox fails to update when the condition in the IF statement is met

What is the process for setting a cookie in Next.js from a different backend server?

Create a regex pattern that can accurately extract email addresses from a comma-del

The tooltip in chart.js stubbornly holds onto past data even after it's been

Verify and deselect boxes

Angular4 - Div with ngIf doesn't respond to click event

Is there a way to use HTML and JS to draw custom lines connecting elements?

I have managed to update the Immutable and Primitive Data-Types in JS. Now, the question arises - are these truly Primitives or are the concepts in

Adjust the dimensions of the bootstrap dropdown to match the dimensions of its textbox

Issue with IE7 causing rollover navigation blocks to disappear when hovering over content

Integrating a Google map into an Ionic Side-Menu application

The creation of a MozillaBrowserBot object has encountered an error

Error encountered when generating bower.json due to absence of version number

How can I resolve the issue of encountering the "Modal dialog present: If you navigate away from this page, any unsaved changes will be lost" message while using Internet Explorer with

Styling a playbook using CSS Grid management techniques