Css - Attribute pipe Selector


Css - Attribute pipe Selector

  • The [attribute|="value"] selector is used to select elements with the named attribute starting with the named value.

Example :

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

Sample Code :

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

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

Code Explanation :

 

    [class|=top] is the [attribute|="value"] selector being used to select elements with the specified attribute starting with the specified value. Here Class is an attribute and top is a value.

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

    <h1 class="top-header"> will have the styles specified by [class|=”top”] selector. Since the starting values begins with top keyword.

    But the paragraph class will not have the styles specified by the [class|=”top”] attribute. Because the value “topcontent” is considered as a different value.

Output :

    Here the heading text “Welcome To Wikitechy” will have a cyan background color as displayed in the browser window.

    The paragraph text “Hello Wikitechy” will not have any background color as displayed above.