CSS: Difference between ^ and | selector:

Caret ^: selects elements where the value of the specified attribute starts with a certain value:

Pipe |: selects elements where the value of the specified attribute is either exactly the value or starts with the value immediately followed by -:

Difference between pipe (|) and caret (^) attribute selectors