Wildcard Selectors (*, ^ and $) in CSS for classes

Wildcard selectors can be used with attribute selectors. The asterisk (*) matches any character, the caret (^) matches the start, and the dollar sign ($) matches the end of an attribute value. For example, .class* selects all elements with a class attribute containing "class" anywhere, .class^ selects those starting with "class," and .class$ selects those ending with "class." These selectors provide flexibility when styling elements with similar attributes.

Syntax:

[attribute*="value"] {
 // CSS property
}

Contains (*=) wildcard selector

The (*=) wildcard selector is used with attribute selectors to target elements with an attribute that contains a specific substring.

Syntax:

[class*="string"] {
 // CSS property
}

Example: Implementation of (*=) wildcard selector.

Output:

👁 Screenshot-2024-01-17-152221

Starts with (^=) wildcard selector

The `(^=)` wildcard selector in CSS targets elements whose attribute value begins with a specific string, applying styles accordingly.

Syntax:

[attribute^="str"] {
 // CSS property
}

Example: Implementation of (^=) wildcard selector.

Output:

👁 Image

Ends with ($=) wildcard selector

The '($=)' wildcard selector in CSS targets elements whose attribute value ends with a specific string, allowing for styling based on this condition.

Syntax:

[attribute$="str"] {
 // CSS property
}

Example: Implementation of ($=) wildcard selector.

Output:👁 Image

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.