Caret (^): selecciona un elemento (

) donde el valor del atributo especificado ( rel ) comienza con un cierto valor ( val ):

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

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

 
I'm Blue.
 
I'm Blue.
 
I'm Black. 

Como w3schools declara ambos | y ^ seleccionar atributo comenzando con un valor definido

No , el | no se utiliza para seleccionar elementos cuyo valor de atributo comience con un cierto valor.

Aquí está lo que dice la especificación W3C sobre estos selectores. ^{(el énfasis es mío)}

[att | = val]

Representa un elemento con el atributo att, su valor es exactamente “val” o comienza con “val” inmediatamente seguido de “-” (U + 002D) .

[att ^ = val]

Representa un elemento con el atributo att cuyo valor comienza con el prefijo “val”. Si “val” es la cadena vacía, entonces el selector no representa nada.

Entonces, el | el símbolo en el selector de atributos seleccionaría solo elementos cuyo valor de atributo sea exactamente el valor dado o comience con el valor dado seguido de un guión .

Como puede ver en el siguiente fragmento, el selector de atributos que utiliza | ( [data-test |= 'val'] ) no selecciona el elemento cuando el valor del atributo es valid mientras que el selector de atributos con ^ ( [data-test ^= 'val'] ) sí lo hace.

 div[data-test |= 'val'] { color: beige; } div[data-test ^= 'val'] { background: red; } 

 
Hello
 
Hello
 
Hello 

Simplemente pon:

E [foo | = “en”] coincide …

un elemento E cuyo atributo “foo” tiene una lista de valores separados por guiones que comienzan con “en”

E [foo ^ = “bar”] coincide con …

un elemento E cuyo valor de atributo “foo” comienza exactamente con la cadena “bar”

Información expandida:

[att | = val]

Representa un elemento con el atributo att , su valor es exactamente “val” o comienza con “val” inmediatamente seguido de “-“. Esto está destinado principalmente a permitir coincidencias de subcódigo de idioma (por ejemplo, el atributo hreflang en el elemento a en HTML).

[att ^ = val]

Representa un elemento con el atributo att cuyo valor comienza con el prefijo “val”. Si “val” es la cadena vacía, entonces el selector no representa nada.

Fuente: http://www.w3.org/TR/css3-selectors/#selectors

Ejemplos

HTML

 
 
testing attribute selectors
 
testing attribute selectors
 
testing attribute selectors
 
testing attribute selectors
 
testing attribute selectors
  

Probando el selector de tubería (|).

 li[title|="testing"] { background-color: aqua; } 

Prueba del selector de intercalación (^).

 li[title^="testing"] { background-color: pink; } 

 #pipe > li[title|="testing"] { background-color: aqua; } #caret > li[title^="testing"] { background-color: pink; } 

 
 Testing the pipe (|) selector. 
 
 
testing attribute selectors
 
testing attribute selectors
 
testing attribute selectors
 
testing attribute selectors
 
testing attribute selectors
 
 
 
 Testing the caret (^) selector. 
 
 
testing attribute selectors
 
testing attribute selectors
 
testing attribute selectors
 
testing attribute selectors
 
testing attribute selectors