Selector de atributo de CSS

El selector de atributo de estilo se utiliza para establecer estilos en elementos HTML que tienen un atributo específico. Puede establecer estilos para elementos HTML que tienen un atributo específico, no solo para los atributos class y id.

Conozca el selector de atributo

El selector de atributo de CSS proporciona un método simple y poderoso para aplicar estilos a elementos HTML específicos.Atributo o valor de atributola existencia aplicará el estilo al elemento HTML.

Puede crear un selector de atributo colocando el atributo (opcionalmente con un valor) entre corchetes. También puede colocarlo antes de unSelector de tipo de elemento.

Las siguientes secciones describen los selectores de atributo más comunes.

Selector [attribute] de CSS

Esta es la forma más simple del selector de atributo, si el atributo dado existe, se aplica la regla de estilo al elemento. Por ejemplo, podemos usar las siguientes reglas de estilo para estilizar todos los elementos con atributo:

[title]　{
　　　　[title] {
}

color: azul;

[title] El selector en el ejemplo coincide con todos los elementos que tienen el atributo title.

También puede restringir el rango de selección para elementos específicos de HTML colocando el selector de atributo después del selector de tipo de elemento, como se muestra a continuación:
　　　　abbr[title] {
}

color: rojo;Selector abbr[title] solo coincide conLos elementos que tienen el atributo title, por lo tanto, coinciden con los abreviados, pero no coinciden con los que tienen el atributoancla

elemento title.

Selector CSS [attribute="value"]

input[type="submit"]　{
　　　　border:　1Puede usar el operador = para que el selector de atributo coincida con cualquier elemento cuyos valores de atributo coinciden completamente con el valor dado:
}

px sólido verde; El selector en el ejemplo anterior coincide con input

Todos los elementos que tienen un valor de atributo igual a submit.

Selector CSS [attribute〜="value"]Puede usar el operador ~= para que el selector de atributo coincida con el valor del atributo que está compuesto porseparados por espacio

[class~="warning"] {
　　　　color:　#fff;
　　　　background:　rojo;
}

Coincide con cualquier elemento que tenga la lista de valores (por ejemplo, class="alert warning") que contenga un valor igual al especificado:

Selector CSS [attribute |="value"]

Puede usar el operador |= para que el selector de atributo coincida con el atributo que tiene un valor que comienza con el valor especificadoseparados por guionesCoincide con cualquier elemento de la lista de valores:

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

El selector en el ejemplo anterior coincide con los que tienenlangTodos los elementos del atributo que contienen un valor que comienza con en, independientemente de si el valor tiene guiones y más caracteres después. En otras palabras, sus elementos coinciden con lang que tiene el atributo de valor en, en-US, en-GB, etc., y no puede ser US-en, GB-en.

Selector CSS [attribute ^="value"]

Puede usar el operador ^= para que el selector de atributo coincida con el valor del atributoconvalor especificadode principioCualquier elemento coincide. No tiene que ser una palabra completa.

a[href^="http://"] {
　　　　background: url("external.png")　100%　50% sin-repetir;
　　　　margen-right:　15px;
}

El selector en el ejemplo anterior localiza todos los enlaces externos y agrega un pequeño icono que indica que se abrirán en una nueva pestaña o ventana.

Selector CSS [attribute $="value"]

Del mismo modo, se puede usar el operador $= para seleccionar valores de atributoconvalor especificadoque termina enTodos los elementos. No tiene que ser una palabra completa.

a[href$=".pdf"]　{
　　　　background:　url("pdf.png")　0　50% sin-repetir;
　　　　margen-left:　20px;
}

Este selector seleccionaEnlace a todos los elementos que apuntan a documentos PDF y agrega un pequeño icono PDF para proporcionar información sobre el enlace al usuario.

CSS [attribute *="value"] selector

Puede usar*Operador de igualdad = hace que el selector de atributo coincida con todos los elementos cuyos valores de atributo contienen el valor especificado.

[class*="warning"]　{
　　　　color:　#fff;
　　　　background:　rojo;
}

Este selector coincide con todos los elementos HTML con la clase value que contiene warning. Por ejemplo, sus elementos coinciden con los que tienen el valor de clase warning, alert warning, alert-advertencia o alert_warning, etc.

Estilizar formularios con selector de atributo

Selector de atributo para sinclasso estilos especiales de estilo muy útilesid：

input[type="text"],　input[type="password"]　{
　　　　width:　150px;
　　　　display:　bloque;
　　　　margen-bottom:　10px;
　　　　background:　amarillo;
}
input[type="submit"]　{
　　　　padding:　2px　10px;
　　　　border:　1px sólido #804040;
　　　　background:　#ff8040;
}