Can CSS Selectors Target Elements Based on Class Prefixes?

Can CSS Selectors Target Elements Based on Class Prefixes?

In scenarios where you want to apply CSS rules to elements that have a shared class prefix, CSS2.1 presents limitations. However, with the introduction of CSS3 attribute substring-matching selectors, it becomes feasible.

To achieve this, utilize the following attribute selectors:

• [class^="status-"]: Matches elements with class names starting with "status-".
• [class*=" status-"]: Matches elements with class names containing "status-" immediately after a space character.

By combining these selectors, it becomes possible to target elements whose class attributes meet the specified conditions, including cases where multiple classes are present:

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

It's important to note that the above approach avoids matching elements with class attributes like "foo-status-bar", which may be undesirable.

Alternative solutions may include using jQuery or restructuring the HTML markup to explicitly include status prefixes as separate classes. However, the CSS3 substring-matching selectors provide a robust and CSS-only solution to addressing class prefixes in style rules.

The above is the detailed content of Can CSS Selectors Target Elements Based on Class Prefixes?. For more information, please follow other related articles on the PHP Chinese website!