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:



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:



My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.