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

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×