CSS AtributosSelectores

Los selectores de atributos CSS se utilizan para seleccionar elementos HTML según sus atributos o valores de atributo.

Los selectores de atributos te permiten aplicar estilos a los elementos sin necesidad de añadir clases o ID a los mismos.

Nota:IE7 e IE8 requieren declarar!DOCTYPEpara que se admitan los selectores de atributos. IE6 y versiones anteriores no admiten los selectores de atributos.

A continuación se muestran los selectores de atributos CSS más comunes:

1、[attribute]

Selecciona todos los elementos con el atributo especificado (independientemente del valor del atributo).

/* 选择所有具有 `type` 属性的元素 */
[type] {
  border: 1px solid red;
}

2、[attribute="value"]

Selecciona los elementos cuyo atributo especificado coincide exactamente con el valor dado.

/* 选择所有 `type` 属性等于 `text` 的元素 */
[type="text"] {
  background-color: yellow;
}

3、[attribute~="value"]

Selecciona los elementos cuyo valor de atributo contiene la palabra especificada (una de las palabras de una lista separada por espacios).

/* 选择属性值中包含 `button` 的元素 */
[class~="button"] {
  font-weight: bold;
}

4、[attribute|="value"]

Selecciona los elementos cuyo valor de atributo tiene el valor especificado o comienza con el valor especificado seguido de un guion '-'. Se usa a menudo para códigos de idioma.

/* 选择所有 `lang` 属性是 `en` 或者以 `en-` 开头的元素 */
[lang|="en"] {
  color: green;
}

5、[attribute^="value"]

Selecciona los elementos cuyo valor de atributo comienza con el valor especificado.

/* 选择所有 `href` 属性以 `https` 开头的链接 */
[href^="https"] {
  text-decoration: none;
}

6、[attribute$="value"]

Selecciona los elementos cuyo valor de atributo termina con el valor especificado.

/* 选择所有 src 属性以 .jpg 结尾的图片 */
[src$=".jpg"] {
  border: 2px solid blue;
}

7、[attribute*="value"]

Selecciona los elementos cuyo valor de atributo contiene el valor especificado.

/* 选择所有 `title` 属性中包含 `tutorial` 的元素 */
[title*="tutorial"] {
  font-style: italic;
}

Con los selectores de atributos, puedes seleccionar fácilmente elementos y aplicar estilos específicos según sus atributos, lo que aumenta la flexibilidad y la mantenibilidad.

Selectores de atributos

El siguiente ejemplo cambia a azul todos los elementos que contienen un atributo title:

Selectores de atributos y valores

El siguiente ejemplo cambia el estilo del borde del elemento con title='ejemplo':

Selectores de atributos y valores: múltiples valores

A continuación se muestra un ejemplo de estilo para elementos cuyo atributo title contiene el valor especificado, usando (~) para separar atributo y valor:

A continuación se muestra un ejemplo de estilo para elementos cuyo atributo lang contiene el valor especificado, usando (|) para separar atributo y valor:

Estilos de formulario

El estilo con selectores de atributos no requiere el uso de clases o ids: