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

user_679749 0
Viewed 10094

I found the following definition in a CSS stylesheet : 

*|*:link {color:#ff00ff;}

What's the use of the |? Is it some sort of CSS Hack?

css
3 Answers

In short it is used to easily target attribute values which are similar upto certain letters,

In a workaround example of different languages,

<p lang="en-US">Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi iure labore, animi nobis beatae doloribus minus ipsum laborum delectus</p>
<p lang="en-US">Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi iure labore, animi nobis beatae doloribus minus ipsum laborum delectus</p>
<p lang="fr-FR">Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi iure labore, animi nobis beatae doloribus minus ipsum laborum delectus</p>
<p lang="fr-CA">Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi iure labore, animi nobis beatae doloribus minus ipsum laborum delectus</p>

If you use pipe selector like this,

p[lang|="en"]{
border:1px solid aqua;
}

Only first two paragraph will have border.

Here this targeted whichever paragraph attribute value started with "en

user_174869230
Related