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 atributohreflang
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
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