¿Cuál es la diferencia entre los selectores de atributo pipe (|) y caret (^)?

En W3Schools declaran ambos | y ^ significa: Seleccione un elemento con un atributo que comience con un valor especificado .

Entonces, ¿cuál es la diferencia?

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; } 

enter image description here

Prueba del selector de intercalación (^).

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

enter image description here

 #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