CSS offers us three simple yet powerful regex-like tools:
Caret (^
): Finds elements where the class starts with specific characters.
- Example:
div[class^="card"]
targets all elements whose class names start withcard
, no matter what follows.
Asterisk (*
): Searches for specific characters anywhere in the class name.
- Example:
div[class*="new"]
targets elements wherenew
appears, regardless of position.
Dollar Sign ($
): Matches classes where specific characters appear at the end.
- Example:
div[class$="prioritize"]
targets classes ending withprioritize
.