Seletor de Atributo do CSS

O seletor de atributo define estilos para elementos HTML com atributos específicos. Pode definir estilos para elementos HTML com atributos específicos, não apenas para atributos class e id.

Entendendo o seletor de atributo

Os seletores de atributo do CSS oferecem um método simples e poderoso para aplicar estilos a elementos HTML específicos.Atributo ou valor de atributoa existência aplicará estilos aos elementos HTML.

Você pode criar um seletor de atributo colocando o atributo (opcionalmente com um valor) entre colchetes. Você também pode colocá-lo antes de umSeletor de tipo de elemento.

As seções a seguir descrevem os seletores de atributo mais comuns.

Seletor [attribute] do CSS

Esta é a forma mais simples do seletor de atributo, se o atributo fornecido existir, aplicará as regras de estilo ao elemento. Por exemplo, podemos usar as seguintes regras de estilo para estilizar todos os elementos que possuem um atributo:

[title] {}}
　　　　cor: azul;
}

[title] O seletor no exemplo coincide com todos os elementos que têm o atributo title.

Você também pode limitar a seleção para elementos específicos de HTML colocando o seletor de atributo após o seletor do tipo de elemento, conforme mostrado a seguir:

abbr[title] {
　　　　cor: vermelha;
}

O seletor abbr[title] coincide apenas comelementos que têm o atributo title, portanto, eles coincidem com o abreviatura, mas não com o atributoâncoraelemento title.

Seletor CSS [attribute="value"]

Você pode usar o operador = para fazer o seletor de atributo coincidir com qualquer elemento cujo valor do atributo seja exatamente igual ao valor dado:

input[type="submit"]　{
　　　　border:　1px sólido verde;
}

O seletor no exemplo coincide com input todos os elementos que têm o valor do atributo type igual a submit.

Seletor CSS [attribute〜="value"]

Você pode usar o operador ~= para fazer o seletor de atributo coincidir com o valor do atributo que é composto porseparados por espaçoqualquer elemento da lista de valores coincide, um dos quais é igual ao valor especificado:

[class~="warning"] {
　　　　cor:　#fff;
　　　　background:　vermelho;
}

qualquer elemento que tenha a classe com valores separados por espaço, um dos quais é warning. Por exemplo, ele coincide com o elemento que tem o valor da classe warning, alert warning, etc.

Seletor CSS [attribute |="value"]

Você pode usar o operador |= para fazer o seletor de atributo coincidir com o atributo que tem um valor começando com o valor especificadoseparados por hífenqualquer elemento da lista de valores coincide:

[lang|=en] {
　　　　cor:　#fff;
　　　　background: blue;
}

O seletor no exemplo coincide com o que temlangTodos os elementos que têm o atributo lang com o valor começando com en, independentemente de haver hífen e mais caracteres após ele. Em outras palavras, seus elementos coincidem com o valor do atributo lang en, en-US, en-GB, etc., e não pode ser US-en, GB-en.

Seletor CSS [attribute ^="value"]

Você pode usar o operador ^= para fazer o seletor de atributo coincidir com o valor do atributocomvalor especificadode inícioQualquer elemento que coincida. Não precisa ser uma palavra completa.

a[href^="http://"] {
　　　　background: url("external.png")　100%　50%　sem-repetição;
　　　　preenchimento-right:　15px;
}

O seletor no exemplo localiza todos os links externos e adiciona um pequeno ícone, indicando que eles serão abertos em uma nova aba ou janela.

Seletor CSS [attribute $="value"]

Da mesma forma, você pode usar o operador $= para escolher valores de atributocomvalor especificadocomtodos os elementos. Não precisa ser uma palavra completa.

a[href$=".pdf"]　{
　　　　background:　url("pdf.png")　0　50%　sem-repetição;
　　　　preenchimento-esquerda:　20px;
}

Neste exemplo, o seletor escolheligar a todos os elementos que linkam para documentos PDF e adicionar um pequeno ícone PDF, para fornecer aos usuários dicas sobre o link.

CSS [attribute *="value"] seletor

Você pode usar*operador de igualdade = faz com que o seletor de atributo coincida com todos os elementos que têm um valor de atributo contendo o valor especificado.

[class*="warning"]　{
　　　　cor:　#fff;
　　　　background:　vermelho;
}

Neste exemplo, o seletor coincidirá com todos os elementos HTML que contêm a classe value contendo warning. Por exemplo, seus elementos coincidirão com elementos que têm o valor de classe warning, alert warning, alert-aviso ou alert_warning e outros

Estilizar Formulários com Seletor de Atributo

Seletor de Atributo para Semclassou estilos especiais especialmente úteisid：

input[type="text"],　input[type="password"]　{
　　　　largura:　150px;
　　　　display:　bloco;
　　　　margem-bottom:　10px;
　　　　background:　laranja;
}
input[type="submit"]　{
　　　　padding:　2px　10px;
　　　　border:　1px　sólido　#804040;
　　　　background:　#ff8040;
}