How Can I Efficiently Style Multiple Elements with Similar Class Names in CSS?

Styling Multiple Elements with Wildcards in CSS

When styling elements with unique identifiers, it can become tedious to create separate classes for each one. CSS provides an elegant solution with the wildcard character *.

Using Wildcards for Classes

In your example, you have multiple divs with two classes each, one common class (tocolor) and an individual identifier (e.g., tocolor-1). To style them with a single class, you can use the following wildcard syntax:

.tocolor-* {
  background: red;
}

However, as you discovered, this method does not work in CSS.

Attribute Selectors to the Rescue

The correct approach is to use attribute selectors, which allow you to select elements based on the value of their attributes. In this case, you can use the class attribute:

div[class^="tocolor-"], div[class*=" tocolor-"] {
    color:red
}

• [class^="tocolor-"] selects elements whose class attribute starts with "tocolor-".
• [class*=" tocolor-"] selects elements whose class attribute contains "tocolor-".

In your example, both conditions would match the divs with classes tocolor-1, tocolor-2, etc.

Demo and More Information

You can see a live demonstration of this solution at:

[jsfiddle.net/K3693/1/](http://jsfiddle.net/K3693/1/)

For more information on CSS attribute selectors, refer to the following resources:

• [CSS Attribute Selectors](https://www.w3.org/TR/selectors/#attribute-selectors)
• [MDN Docs: Attribute Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)

The above is the detailed content of How Can I Efficiently Style Multiple Elements with Similar Class Names in CSS?. For more information, please follow other related articles on the PHP Chinese website!