CSS - Attribute dollar Selector


CSS - Attribute dollar Selector

  • In CSS, the [attribute$="value"] selector is used to select elements whos10e attribute value ends with a named value.

Example :

[class$="test"] 
{
background: green;
}

Sample Code :

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

        [class$="test"] 
        {
            background: green;
        }
    </style>
</head>
<body>
    <div
class="first_test">Welcome To Wikitechy</div>
    <p
class="my-test">Wikitechy wants to reshape e-learning platform.>
    <p
class="mytest">More than 500 solutions for errors</p>
</body>
</html>

Code Explanation :


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

Note : Class is an attribute and  test is value.

    Background property with a value green displays a green background for an element.

    Div tag <div> is used to apply styles for multiple elements. Class name first_test will have functionalities of [class$=”text”] since its value that ends with "test".

    Similarly calling my-test class for a paragraph tag <p> will have the styles specified in the [class$=”text” attribute] for the paragraph text “wikitechy wants to reshape e-learning platform.”

    The paragraph text “More than 500 solutions for errors” will also have the styles specified in the [class$="test"].

Output :


    The three paragraph text will have a background color green as shown & displayed in the browser window.