Open In App

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Wildcard Selector</title>
    <style>
        /* Apply styles to elements with a class containing "str" */
        [class*="str"] {
            background: green;
            color: white;
        }
 
        h1 {
            color: green;
        }
 
        body {
            text-align: center;
            width: 60%;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
 
    <!-- The first div with a class containing "str" -->
    <div class="first-string">The first div element.</div>
 
    <!-- The second div with a class not containing "str" -->
    <div class="second-div">The second div element.</div>
 
    <!-- The third div with a class containing "strt" -->
    <div class="my-start">The third div element.</div>
 
    <!-- A paragraph with a class containing "str" -->
    <p class="my-string">Paragraph Text</p>
</body>
 
</html>


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.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Wildcard Selector</title>
    <style>
        [class^="str"] {
            background: green;
            color: white;
        }
 
        h1 {
            color: green;
        }
 
        body {
            text-align: center;
            width: 60%;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <!-- All items beginning with str are highlighted -->
    <div class="strfirst">The first div element.</div>
    <div class="strsecond">The second div element.</div>
    <div class="str-start">The third div element.</div>
    <div class="end-str">The fourth div element.</div>
    <p class="my">Paragraph Text</p>
</body>
 
</html>


Output:

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.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Wildcard Selector</title>
    <style>
        [class$="str"] {
            background: green;
            color: white;
        }
 
        h1 {
            color: green;
        }
 
        body {
            text-align: center;
            width: 60%;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <!-- All items ending with str are highlighted -->
    <div class="firststr">The first div element.</div>
    <div class="stsecondstr">The second div element.</div>
    <div class="start">The third div element.</div>
    <p class="mystr">This is some text in a paragraph.</p>
</body>
 
</html>


Output:                                 

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.



Last Updated : 24 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads