Selector de atributo de CSS

Establecer estilo para elementos HTML con atributo específico

Podemos establecer el estilo de los elementos HTML que tienen un atributo o valor de atributo específico.

Selector [attribute] CSS

El selector [attribute] selecciona elementos que tienen un atributo específico.

El siguiente ejemplo selecciona todos los elementos <a> que tienen el atributo target;

Ejemplo

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

Inténtelo usted mismo

Selector [attribute="value"] de CSS

El selector [attribute="value"] selecciona elementos que tienen un atributo específico y valor.

El siguiente ejemplo selecciona todos los elementos <a> que tienen el atributo target="_blank":

Ejemplo

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

Inténtelo usted mismo

Selector [attribute~="value"] de CSS

El selector [attribute~="value"] selecciona elementos que tienen un atributo con un valor que contiene la palabra especificada.

El siguiente ejemplo selecciona todos los elementos que tienen el atributo title que contiene la palabra "flower":

Ejemplo

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

Inténtelo usted mismo

El ejemplo anterior coincidirá con los elementos siguientes: title="flower", title="summer flower" y title="flower new", pero no coincidirá con: title="my-flower" o title="flowers".

Selector [attribute|="value"] de CSS

[attribute|="value"] El selector selecciona elementos que tienen un atributo con un valor que comienza con ese valor.

El siguiente ejemplo selecciona todos los elementos cuyos atributos class comiencen con "top":

Notas:El valor debe ser una palabra completa o única, por ejemplo class="top" o seguido de un guión, como class="top-text".

Ejemplo

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

Inténtelo usted mismo

Selector CSS [attribute^="value"]

El selector [attribute^="value"] se utiliza para seleccionar los elementos cuyos atributos comiencen con el valor especificado.

El siguiente ejemplo selecciona todos los elementos cuyos atributos class comiencen con "top":

Consejo:¡El valor no tiene que ser una palabra completa!

Ejemplo

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

Inténtelo usted mismo

Selector CSS [attribute$="value"]

El selector [attribute$="value"] se utiliza para seleccionar los elementos cuyos atributos terminen con el valor especificado.

El siguiente ejemplo selecciona todos los elementos cuyos atributos class terminen en "test":

Consejo:¡El valor no tiene que ser una palabra completa!

Ejemplo

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

Inténtelo usted mismo

Selector CSS [attribute*="value"]

El selector [attribute*="value"] selecciona los elementos cuyos valores de atributo contengan la palabra especificada.

El siguiente ejemplo selecciona todos los elementos cuyos atributos class contengan "te":

Consejo:¡El valor no tiene que ser una palabra completa!

Ejemplo

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

Inténtelo usted mismo

Definir estilos de formulario

Si necesita definir estilos para formularios sin clase o id, los selectores de atributo son muy útiles:

Ejemplo

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

Inténtelo usted mismo

Consejo:Visite nuestra Tutorial de CSS para formularios，para obtener más información sobre cómo usar CSS para definir estilos de formularios.

Todos los selectores de atributo CSS

Selector Ejemplo Descripción del ejemplo
[attribute] [target] Seleccione todos los elementos que tengan el atributo target.
[attribute=value] [target=_blank] Seleccione todos los elementos que tengan el atributo target igual a "_blank".
[attribute~=value] [title~=flower] Seleccione todos los elementos que tengan el atributo title que contengan la palabra "flower".
[attribute|=value] [lang|=en] Seleccione todos los elementos que tengan el atributo lang que comience con "en".
[attribute^=value] a[href^="https"] Seleccione cada elemento <a> cuyos valores de atributo href comiencen con "https".
[attribute$=value] a[href$=".pdf"] Seleccione cada elemento <a> cuyos valores de atributo href terminen en ".pdf".
[attribute*=value] a[href*="codew3c"] Seleccione cada elemento <a> que contenga la subcadena "codew3c" en su atributo href.

Lecturas complementarias

Libro complementario:Detalles del selector de atributo CSS