CSS - Attribute top Selector


CSS - Attribute top Selector

  • The [attribute^="value"] selector is used to select elements whose attribute value begins with a specified value.

Example :

[class^="top"] 
{
    background: yellow;
}

Sample Code :

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

        [class^=top] 
        {
            background: orange;
        }
    </style>
</head>
<body>
    <h1
class="top-header">Welcome To Wikitechy</h1>
    <p class="topcontent">Hai Wikitechy</p>
</body>
</html>

Code Explanation :


    [class^=top] defines the [attribute|="value"] selector which is used to select elements with the specific attribute (top).

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

    <h1 class="top-header"> will have the styles specified in the [class^=top] since its value begins with a top keyword. Also the text will be displayed in h1.

    Similarly, <p class="topcontent"> will have the styles specified in the [class^=top] selector.

Output :


    The heading text “Welcome To Wikitechy” and paragraph text “Learn To Code” have a yellow background color as displayed in the above web browser as shown.