Selectores de atributo CSS

Es posible dar estilos a etiquetas HTML que tienen atributos específicos o un valor especifico del atributo.

Selector [atributo] CSS

El selector [atributo] es usado para seleccionar etiquetas que tienen declarados un atributo específico.

El siguiente ejemplo aplico todas las etiquetas <a> que tienen definido el atributo target:

a[target] {
  background-color: yellow;
}

Selector [atributo=”valor”] CSS

El selector [atributo="valor"] es usado para seleccionar etiquetas que tienen declarados un atributo especifico y tienen un valor especifico en dicho atributo:

En el siguiente ejemplo, aplica para todas las etiquetas <a> que tienen especificado el atributo target="_blank":

a[target="_blank"] {
  background-color: yellow;
}

Selector [atributo~=”valor”] CSS

El selector [atributo~="valor"] es usado para seleccionar etiquetas que contiene en su valor de atributo la palabra especificada:

En el siguiente ejemplo, aplica a todos las etiquetas que en su valor de atributo “title” contiene la palabra flor:

[title~="flor"] {
  border: 5px solid yellow;
}

Selector [atributo|="valor"] CSS

El selector [atributo|="valor"] es usado para seleccionar etiquetas que el valor de su atributo inicia con el valor especificado.

El siguiente ejemplo, selecciona todas las etiquetas con el atributo class en el que su valor inicia con "top":

[class|="top"] {
  background-color: yellow;
}

Nota: El valor tiene que ser una palabra completa, ya sea solo, como class="top", o seguido por un guión (-), como class="top-text".

Selector [atributo^="valor"] CSS

El selector [atributo^="valor"] es usado para seleccionar etiquetas que su valor de su atributo inicia con el valor especifico.

En el siguiente ejemplo, aplica para todas las etiquetas con el atributo class en el que su valor inicia con "top":

[class^="top"] {
  background-color: yellow;
}

Nota: El valor no tiene que ser una palabra completa, aplica también para class="toptext".

Selector [atributo$=”valor”] CSS

El selector [atributo$="valor"] es usado para seleccionar etiquetas que el valor de su atributo termina con el valor especificado.

En el siguiente ejemplo, aplica para todas las etiquetas que su valor en el atributo class termina con "test":

[class$="test"] {
  background-color: yellow;
}

Nota: El valor no tiene que ser una palabra completa.

Selector [atributo*="valor"] CSS

El atributo [atributo*="valor"] es usado para seleccionar etiquetas en su valor del atributo contiene el valor especificado.

En el siguiente ejemplo, aplica para todas las etiquetas que en el valor de su atributo class contiene "te":

[class*="te"] {
  background-color: yellow;
}

Estilos para Formularios

El selector de atributos puede ser muy util para dar estilos a los formularios sin los atributos class o id:

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}
input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}