How Can I Efficiently Match CSS Classes Based on a Prefix?

CSS Selectors for Class Prefix Matching

Achieving CSS rule application based on a specific class prefix can present a challenge. While CSS 2.1 lacks this capability, CSS3 offers a solution with attribute substring-matching selectors.

CSS3 Solution:

CSS3 introduces the [class^="prefix-"] and [class*=" prefix-"] selectors. The former matches elements whose class attribute starts with "prefix-", while the latter matches elements containing "prefix-" after a whitespace character.

div[class^="status-"], div[class*=" status-"]

This combination ensures matching for elements whose class attribute meets either condition. The use of a space character in the second selector prevents matches for elements with class names like "status-bar". However, it effectively checks subsequent classes if multiple are specified or accounts for space padding in the attribute value.

Robustness:

Note that using [class="status-"] alone can lead to undesired matches, such as elements with a class name like "foo-status-bar". The combination of [class^="status-"] and [class=" status-"] provides greater robustness.

Alternative Approach:

If feasible, consider creating a dedicated class with the status prefix to simplify the CSS rule. This approach can avoid the need for complex attribute selectors.

The above is the detailed content of How Can I Efficiently Match CSS Classes Based on a Prefix?. For more information, please follow other related articles on the PHP Chinese website!