Elementos de estilo HTML com atributos específicos
É possível ao estilo elementos HTML que tenham atributos específicos ou valores de atributos.
CSS [atributo] Selector
O [attribute] seletor é usado para selecionar elementos com um atributo especificado.
O exemplo a seguir seleciona todos os <a> elementos com um atributo de destino:
CSS [atributo = "valor"] Selector
O [attribute="value"] seletor é usado para selecionar elementos com um atributo e valor especificado.
O exemplo a seguir seleciona todos os <a> elementos com um target="_blank" atributo:
CSS [atributo ~ = "value"] Selector
O [attribute~="value"] seletor é usado para selecionar elementos com um valor de atributo que contém uma palavra especificada.
O exemplo a seguir seleciona todos os elementos com um atributo title que contém uma lista separada por espaços de palavras, um dos quais é " flower ":
O exemplo acima irá corresponder elementos com title="flower", title="summer flower" , e title="flower new" , mas não title="my-flower" ou title="flowers" .
CSS [atributo | = "value"] Selector
O [attribute|="value"] seletor é usado para selecionar elementos com o atributo especificado começando com o valor especificado.
O exemplo a seguir seleciona todos os elementos com um valor de atributo de classe que começa com "top" :
Nota: O valor tem que ser uma palavra inteira, sozinho, como class="top" , ou seguido por um hífen ( - ) , como class="top-text" !
CSS [atributo ^ = "valor"] Selector
O [attribute^="value"] seletor é usado para selecionar elementos cujo valor do atributo começa com um valor especificado.
O exemplo a seguir seleciona todos os elementos com um valor de atributo de classe que começa com "top" :
Nota: O valor não tem de ser uma palavra inteira!
CSS [atribuem $ = "valor"] Selector
O [attribute$="value"] seletor é usado para selecionar elementos cujo valor do atributo termina com um valor especificado.
O exemplo a seguir seleciona todos os elementos com um valor de atributo de classe que termina com "test" :
Nota: O valor não tem de ser uma palavra inteira!
CSS [atributo * = "value"] Selector
O [attribute*="value"] seletor é usado para selecionar elementos cujo valor do atributo contém um valor especificado.
O exemplo a seguir seleciona todos os elementos com um valor de atributo de classe que contém "te" :
Nota: O valor não tem de ser uma palavra inteira!
Formas de estilo
Os seletores de atributo pode ser útil para formas de estilo sem class ou ID :
Exemplo
input[type="text"]
{
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"]
{
width: 120px;
margin-left: 35px;
display: block;
} Tente você mesmo " Dica: Visite o nosso CSS Forms Tutorial para mais exemplos de como estilizar formulários com CSS.
Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 » Exercício 6»
Mais exemplos de CSS Seletores
Use o nosso Selector Tester CSS para demonstrar as diferentes seletores.
Para uma referência completa de todos os seletores CSS, por favor, vá ao nosso CSS Seletores de referência .