CSS Attribute Selector

Com os atributos na CSS podemos estilizar alguns elementos. Vamos ver alguns exemplos práticos:

– No exemplo, a tag <a> que tenha o atributo target vai ficar com o fundo definido da regra.

a[target] {
background-color: #ccc;
}

– Podemos ser mas específicos:

a[target=”_blank”] {
    background-color: #ccc;
}

– Nesse exemplo, o elemento que estiver o atributo title com a palavra flores, vai receber a borda. Como a tag <img> por exemplo:

[title~=flores] {
border: 5px solid #ccc;
}

– O elemento que estiver uma classe com a palavra top, vai ter a propriedade aplicada. A classe pode ser  class=”top” ou class=”top-logo” .

[class|=top] {
background: #666;
}

– Os atributos dos <input> podem ajudar a especificar itens de formulários na CSS, sem a necessidade de usar class ou id.

input[type=”text”] {
width: 150px;
margin-bottom: 10px;
background-color: #ccc;
}

input[type=”button”] {
width: 120px;
margin-left: 35px;
}

 

Vale a pena usar os atributos para nos ajudar na formatação.