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

19 May, 2022
Wildcard selector is used to select multiple elements simultaneously. It selects similar type of class name or attribute and use CSS property. * wildcard also known as containing wildcard. [attribute*=”str”] Selector: The [attribute*=”str”] selector is used to select that elements whose attribute value contains the specified sub string str. This example shows how to use a wildcard to select all div with a class that contains str. This could be at the start, the end or in the middle of the class. 
Syntax:
[attribute*="value"] {
    // CSS property
}
Example: 
html
<!DOCTYPE html><html>    <head>        <style>                     /* Define styles of selected items, h1 and               rest of the body */            [class*="str"] {  /* WE USE * HERE */                background: green;                color: white;            }            h1 {                color:green;            }            body {                text-align:center;                width:60%;            }        </style>    </head>    <body>        <h1>GeeksforGeeks</h1>                 <!-- Since we have used * with str, all items with             str in them are selected -->        <div class="first_str">The first div element.</div>        <div class="second">The second div element.</div>        <div class="my-strt">The third div element.</div>        <p class="mystr">Paragraph Text</p>    </body></html>
Output:
  
[attribute^=”str”] Selector: The [attribute^=”value”] selector is used to select those elements whose attribute value begins with a specified value str. This example shows how to use a wildcard to select all div with a class that starts with str. 
Syntax:
[attribute^="str"] {
    // CSS property
}
Example: 
html
<!DOCTYPE html><html>    <head>        <style>            [class^="str"] { /*WE USE ^ HERE */                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:
 
 [attribute$=”str”] Selector: The [attribute$=”value”] selector is used to select those elements whose attribute value ends with a specified value str. The following example selects all elements with a class attribute value that ends with str. 
Syntax:
[attribute$="str"] {
    // CSS property
}
Example: 
html
<!DOCTYPE html><html>    <head>        <style>            [class$="str"] { /* WE USE $ HERE */                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.
hardikkoriintern
CSS-Misc
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property