Can CSS3 Wildcard Selectors Target Elements with Class Names Starting with a Specific String?

CSS3 Wildcard Selector for Class Names Prefix

Is it possible to use a wildcard selector to select elements with class names starting with a particular string in CSS3? For instance, we have the following elements:

<div class="myclass-one"></div>
<div class="myclass-two"></div>
<div class="myclass-three"></div>

Can we set the color of all these divs to red in one go using CSS?

The answer is yes. To achieve this, you can use the following CSS selectors with wildcard characters:

div[class^='myclass'], div[class*=' myclass'] {
    color: #F00;
}

The ^ (caret) selector matches elements whose class attribute values begin with the specified string. In this case, it matches elements with class names starting with "myclass-".

The * (asterisk) selector matches elements whose class attribute values contain the specified string anywhere. This includes elements that have multiple class names, one of which starts with "myclass-".

By combining these selectors, you can target all elements with class names that either begin with or contain the string "myclass-". This allows you to set their color to red in one line of CSS code.

The above is the detailed content of Can CSS3 Wildcard Selectors Target Elements with Class Names Starting with a Specific String?. For more information, please follow other related articles on the PHP Chinese website!