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

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:

<!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:

<!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:

<!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:

My Personal Notes

Recommended Posts: