What Does a Pipe (|) Do in a CSS Selector

What does a pipe (|) do in a CSS selector?

It separates namespace and element name.

Unless a default namespace has been defined, *|*:link is a complicated way of writing *:link or just :link.

In an XML document, you could have the following:

<el xmlns="http://name/space" />
<style>
@namespace namespace_example url(http://name/space);
namespace_example|el {background: red;}
</style>

What is the difference between pipe (|) and caret (^) attribute selectors?

Caret (^): selects an element (<h1>) where the value of the specified attribute (rel) starts with a certain value (val):

h1[rel^="val"] { /** formatting */ }

h1[rel^="friend"] { color: blue; }

<h1 rel="friend-external-sandwich">I'm Blue.</h1><h1 rel="friend2-external-sandwich">I'm Blue.</h1><h1 rel="external-sandwich">I'm Black.</h1>

does anybody know what | means in CSS selector

You can find more information about it here :

What | means in CSS

It is used to separate namespace and element name in CSS.

Hope it will help you.

What is the difference between | and ^ Selector?

You can check the difference by yourself. They both look for attribute values starting with some value. However, using |= you need the whole word (or the word separated by a hyphen - from the next word) to be selected. Example:

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

[class^="top"] will select the three of them.

[class|="top"] will select only the two first elements. The last <p> has the class topcontent and therefore the selector won't find the isolated word top

CSS pipe selector with multiple classes

The |= selector only selects the starting portion of the specified attribute.

You'll want the *= operator instead.

p[class*=fruit-]

It will search for classes that contain the phrase fruit-x where x is anything you want.

p[class*=fruit-] {    color: red;}

<p class="fruit-apple something">First</p><p class="whatever fruit-banana">Second</p><p class="whatever fruit">Third (No selection)</p><p class="fruit noselect">Fourth (No selection)</p>

CSS Selector Clarification: |= vs ^=

From the "real" reference (W3C):

E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar"
E[foo|="en"] an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en"

Always go to the actual standard when there appears to be an inconsistency. I tend to avoid w3schools because their quality control is sometimes less than stellar.

What is correct syntax for using vertical bar in CSS?

It's both used as a namespace qualifier and a selector, neither of which are valid in this context. I'm not sure what someone intended, perhaps they wanted to comment it out. If it doesn't break everything, just remove it.

Pipe Chars in HTML Classes

The relevant rules can be found in w3c syndata tokenization section, though it's pretty difficult to conclude from there if pipe is valid or not, as per a glance, it seems that anything is valid for a selector, i.e.:

selector    : any+;
any         : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING
              | DELIM | URI | HASH | UNICODE-RANGE | INCLUDES
              | DASHMATCH | ':' | FUNCTION S* any* ')' 
              | '(' S* any* ')' | '[' S* any* ']' ] S*;

What does this symbol mean in CSS?

Universal selector *

*: What does "*" mean in CSS?

Combinators

Child >: What does the ">" (greater-than sign) CSS selector mean?
Following-sibling ~: What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
Next-sibling +: What does the "+" (plus sign) CSS selector mean?
~ vs +: Difference between CSS + selector and ~ selector

Pseudo-classes

:focus, :active: What is the difference between :focus and :active?
:root: What's the difference between CSS3's :root pseudo class and html?

Attribute selectors

[att|=val], [att^=val]: What is the difference between pipe (|) and caret (^) attribute selectors?

Namespaces

Namespace separator |: What does *|* this mean in CSS?
@namespace rule: What is the use of @namespace in CSS?

Shadow DOM

/deep/ combinator, ::shadow pseudo-element: What do /deep/ and ::shadow mean in a CSS selector?

Important declarations

!important: What are the implications of using "!important" in CSS?

Hacks

*: What does a star-preceded property mean in CSS?
:): What does the smiley face ":)" mean in CSS?

What Does a Pipe (|) Do in a CSS Selector