CSS - Attribute asterisk Selector


CSS - Attribute asterisk Selector 

  • The [attribute*="value"] selector is used to select elements whose attribute value contains a named value.

Example :

[class*="te"]
{  
    background: yellow; 
}

Sample Coding :

<!DOCTYPE html>
<html>
<head>
    <style> 

        [class*="te"]  
        {
            background: yellow;
        }
    </style>
</head>
<body>
    <div
class="first_test">Welcome To Wikitechy website</div>
</body>
</html>

Code Explanation :


    Here [class*="te"] defines the selector being used to select the elements whose attribute value contains a named value, here we have the named value as “ first_test”

Note : Class is an attribute and  te is value.

    Background property with its value as yellow displays a yellow background for an element.

    Inside the div element the Class name “first_test” will be called in the attribute selector [class*="te"] and executes the functionalities for the text “Welcome To Wikitechy Website” with its background color as yellow.

Output :


    The text “Welcome To Wikitechy Website” appears with a background color yellow as displayed in the browser window.