What is the difference between | and ^ Selector?

Question

In W3 Schools selectors refrence they have written

[attribute|=value] [lang|=en]

Selects all elements with a lang attribute value starting with "en"

[attribute^=value] a[href^="https"]

Selects every <a> element whose href attribute value begins with https

So what is the diffrence between them if they both select an element starting with a word?

Good question. This already has good answers here: https://stackoverflow.com/questions/35370441/css-selector-clarification-vs — user2846469, Mar 19 '20 at 17:46
Does this answer your question? [What is the difference between pipe (|) and caret (^) attribute selectors?](https://stackoverflow.com/questions/34530852/what-is-the-difference-between-pipe-and-caret-attribute-selectors) — Mesut Akcan, Mar 19 '20 at 17:59

score 0 · Accepted Answer · answered Mar 19 '20 at 17:47

0

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

answered Mar 19 '20 at 17:47

Eden Hernandez

73
6

Thanks , I aso want to know what is the difference between [attribute~="value"] and [attribute*="value"] – Omar Mohamed Mar 19 '20 at 18:37
Similar answer: one selects only whole words, the other just looks for the value. Example: `
` `
` `
` `
` [class*="block"] will select all the elements. [class~="block"] will select only the second element (class "block")
– Eden Hernandez Mar 19 '20 at 20:44

Cray · Answer 2 · 2020-03-19T17:52:57.037

You can find (usually) more detailed documentation in Mozilla web docs or the W3C Recommendation which should be a base for browser implementations.

[attr|=value]

Represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen, - (U+002D). It is often used for language subcode matches.

Meaning it either matches value or value-more-text (value followed by -)

[attr^=value]

Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.

Meaning it is more loose than the previous selector as it matches an attribute that begins with value and can be followed by any other characters.

What is the difference between | and ^ Selector?

2 Answers2