CSS - Attribute Pipe Selector



 CSS Attribute Pipe Selector

Learn css - css tutorial - CSS Attribute Pipe Selector - css examples - css programs

CSS Attribute pipe selector - Definition and Usage

  • In css pipe (|) selector is used to choose the element with specified attribute starting with identified value.
  • Selector is convenient when you want to set a style for particular elements with starting value of attribute.
  • It is used to refer the beginning of the string and whole word should be the value either alone or hypen value.
CSS Attribute Pipe Selector
  • [The [attribute|="value"] selector is used to select elements with the named attribute starting with the named value.

css code - Example

[class|="top"]
{
    background: yellow;
}
click below button to copy the code. By - css tutorial - team

Sample Code - css html

 Tryit<!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>
click below button to copy the code. By - css tutorial - team

Code Explanation - html css style

Code Explanation Attribute Pipe Selector
  1. [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.
  2. Background property with a value cyan displays cyan background for an element.
  3. <h1 class="top-header"> will have the styles specified by [class|=”top”] selector. Since the starting values begins with top keyword.
  4. 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.

tutorial css - Output :

Output Attribute Pipe Selector
  1. Here the heading text “Welcome To Wikitechy” will have a cyan background color as displayed in the browser window
  2. The paragraph text “Hello Wikitechy” will not have any background color as displayed above

This page provides a detailed information on class in css , learn html and css , css programming , css website , css transition generator , css design , css language , css a , advanced css , html and css tutorial , css coding , html css tutorial , css javascript , html & css , free css , html and css editor , html css javascript , html css editor , css test , html css templates , css editor online.


View More Quick Examples

CSS BASICS & SELECTORS CSS SELECTOR ATTRIBUTE CSS STYLE FORMS COLORS & BACKGROUND CSS MARGIN & PADDING CSS WIDTH & HEIGHT CSS LINKS CSS BLOCKS

Related Searches to css Attribute Pipe Selector