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 :

    background: yellow;

Sample Code :

<!DOCTYPE html>

            background: Cyan;
        Welcome To Wikitechy</h1>
        Hello Wikitechy</p>

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.