Operadores em seletores de atributo no CSS
Operador |
O operador | é usado para selecionar elementos com um atributo que tenha um valor específico ou um valor que inicie com um valor específico, seguido por um hífen.
/* Seleciona elementos com o atributo lang começando com "en" */
[lang|="en"] {
color: blue;
}Operador ~
O operador ~ seleciona elementos com um atributo específico que tenha um valor exato.
/* Seleciona elementos com o atributo role exatamente igual a "button" */
[role~="button"] {
border: 1px solid #333;
}Operador ^
O operador ^ seleciona elementos com um atributo que tenha um valor que comece com um texto específico.
/* Seleciona elementos com o atributo href que comece com "https://" */
[href^="https://"] {
color: green;
}Operador $
O operador $ seleciona elementos com um atributo que tenha um valor que termine com um texto específico.
/* Seleciona elementos com o atributo src que termine com ".jpg" */
[src$=".jpg"] {
width: 100%;
}Operador *
O operador * seleciona elementos com um atributo que contenha um texto específico em qualquer lugar do valor.
/* Seleciona elementos com o atributo alt que contenha a palavra "logo" */
[alt*="logo"] {
opacity: 0.8;
}