Using Wildcards Selectors in CSS for classes, IDs, names, etc.


To totally unlock this section you need to Log-in

A bit of basics

CSS is a way for web developers to define the visual appearance of the web pages that they were creating. It was intended to allow web professionals to separate the content and structure of a website's code from the visual design. Now, in CSS (Cascading Style Sheet), selectors are patterns used to select the element(s) you want to style or, in other words, pattern matching rules to determine which style applies to which element in the document.

To use a selector we need to take advantage of the attribute selector, for example [attribute='property']. The attribute selector can be used on any valid element attribute – id, class, name etc.

Now, let's say that we need to select, using CSS, multiple classes that begins, ends or contains a specific text (usually for IDs, names or classes generated dinamically): the following examples will show what to do in this cases.

Containing wildcard CSS selector

[attribute*="str"] Selector: The [attribute*="str"] selector is used to select that elements whose attribute value contains the specified sub string str.

Syntax:

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

div[class*="string"] {
color: red;
font-weight: 800;
}

This example shows how to use a wildcard to select all div's with a class that contains string. This could be at the start, the end or in the middle of the class.

This would target:

<div class='string'>
<div class='123string'>
<div class='string123'>
<div class='123string123'>

But not:

<div id='string'>
<div class='strin'>

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <style>  
          
            /* Define styles of selected items, h1 and 
               rest of the body */ 
            [class*="str"] {  /* WE USE * HERE */ 
                background: rgba(118,140,181,1);
                color: white; 
            } 
            h1 { 
                color:red; 
            } 
            body { 
                text-align:center; 
                width:60%; 
            } 
        </style> 
    </head> 
    <body> 
        <h1>Wildcard Example</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>

"Starts with" wildcard CSS selector

[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
}

div[class^='string'] {
color: red;
font-weight: 800;
}

This example shows how to use a wildcard to select all div's with a class that starts with string.

This would target:

<div class='string'>
<div class='string123'>

But not:

<div class='123string'>

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <style>  
            [class^="str"] { /*WE USE ^ HERE */ 
                background: rgba(118,140,181,1); 
                color: white; 
            } 
            h1 { 
                color:red; 
            } 
            body { 
                text-align:center; 
                width:60%; 
            } 
        </style> 
    </head> 
    <body> 
        <h1>Wildcard Example</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>

"Ends with" wildcard CSS selector

[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
}

div[class$='string'] {
color: red;
font-weight: 800;
}

This example shows how to use a wildcard to select all div’s that end with string.

This would target:

<div class='string'>
<div class='123string'>

But not:

<div class='string123'>

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>Wildcard Example</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>                        

"Containing" where property is separated by a space

[attribute~="str"] Selector: The [attribute~="str"] selector is used to select that elements whose attribute value contains the specified sub string stras a standalone property, even considering space characters.

Syntax:

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

div[class~="string"] {
color: red;
font-weight: 800;
}

This example shows how to use a wildcard to select all div's that contain string as a standalone property.

This would target:

<div class='string'>
<div class='123 string'>

But not:

<div class='string123'>

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <style>  
          
            /* Define styles of selected items, h1 and 
               rest of the body */ 
            [class~="str"] {  /* WE USE * HERE */ 
                background: rgba(118,140,181,1);
                color: white; 
            } 
            h1 { 
                color:red; 
            } 
            body { 
                text-align:center; 
                width:60%; 
            } 
        </style> 
    </head> 
    <body> 
        <h1>Wildcard Example</h1> 
          
        <!-- Since we have used * with str, all items with 
             str in them are selected -->
        <div class="this_is_a str">The first div element.</div> 
        <div class="second">The second div element.</div> 
        <div class="third">The third div element.</div> 
        <p class="mystr">Paragraph Text</p> 
    </body> 
</html>

Summary
Article Name
Using Wildcards Selectors in CSS for classes, IDs, names, etc.
Description
Let's say that we need to select, using CSS, multiple classes/ID/names that begins, ends or contains a specific text. Let's see how to do it easily using a wildcard approach to thi scenario.
Author
Publisher Name
Heelpbook.net