Angel Politis Angel Politis - 2 months ago 23
CSS Question

Difference between ^ and |

Whenever I want to apply a style an element that contains a specific class I will use one of the following CSS rules, but, as of now, I haven't ever encountered a case where

^
and
|
actually affect different elements.

Code:

[class ^= "fa"] {
display: none;
}

[class |= "fa"] {
display: none;
}


Question: What is really the difference between
^
and
|
when it comes to
CSS Selectors
?

Answer

Both selector ^ and | are used to select elements which has a specified attribute that starts with specified value.

Howerver for | the value should be a whole word or a whole word followed by - (hypen).

Read more here | and ^