Selecting CSS Classes Ending With The Same Name Using $= Operator

Did you know you can select all classes that end with the same name in CSS using the powerful $= operator?

This technique is particularly useful when employing the BEM methodology.

Selecting multiple elements with the same class name in CSS can be time-consuming. Fortunately, the $= operator allows us to select all classes that end with the same name.

The $= operator enables us to select elements that have an attribute ending with a specific value. When applied to CSS classes, this means we can select all classes that end with the same name, regardless of the preceding characters.

If you're utilizing the BEM methodology, you'll likely have numerous classes that end with the same modifier name, such as card--green, alert--green, button--green, and so on. The $= operator permits you to select all classes ending with a particular string, as illustrated below:

[class$="--green"] {
  /* CSS rules */
}

In the example above, we're selecting all classes that end with --green and assigning them a green background color.

By employing the $= operator` in CSS, you can effectively select and style all classes ending with the same name, resulting in cleaner and more maintainable code.
Experiment with this technique in your projects to enhance organization and reduce redundancy.

Check out the thread on Twitter: Here