Elementos de estilo HTML con atributos específicos
Es posible que el estilo de los elementos HTML que tienen atributos específicos o valores de atributos.
CSS [atributo] Selector
El [attribute] selector se utiliza para seleccionar elementos con un atributo especificado.
El siguiente ejemplo selecciona todos los <a> elementos con un atributo de destino:
CSS [atributo = "valor"] Selector
El [attribute="value"] selector se utiliza para seleccionar elementos con un atributo y valor especificado.
El siguiente ejemplo selecciona todos los <a> elementos con un target="_blank" atributo:
CSS [atributo ~ = "valor"] Selector
El [attribute~="value"] selector se utiliza para seleccionar elementos con un valor de atributo que contiene una palabra especificada.
El siguiente ejemplo selecciona todos los elementos con un atributo de título que contiene una lista separada por espacios de palabras, uno de los cuales es " flower ":
El ejemplo anterior coincidirá con los elementos title="flower", title="summer flower" , y title="flower new" , pero no title="my-flower" o title="flowers" .
CSS [atributo | = "valor"] Selector
El [attribute|="value"] selector se utiliza para seleccionar elementos con el atributo especificado empezando con el valor especificado.
El siguiente ejemplo selecciona todos los elementos con un valor de atributo de clase que comienza con "top" :
Nota: El valor tiene que ser una palabra completa, ya sea solo, como class="top" , o seguido de un guión ( - ) , como class="top-text" !
CSS [^ atributo = "valor"] Selector
El [attribute^="value"] selector se utiliza para seleccionar elementos cuyo valor de atributo comienza con un valor especificado.
El siguiente ejemplo selecciona todos los elementos con un valor de atributo de clase que comienza con "top" :
Nota: El valor no tiene por qué ser una palabra completa!
CSS [atributo $ = "valor"] Selector
El [attribute$="value"] selector se utiliza para seleccionar elementos cuyo valor de atributo termina con un valor especificado.
El siguiente ejemplo selecciona todos los elementos con un valor de atributo de clase que termina con "test" :
Nota: El valor no tiene por qué ser una palabra completa!
CSS [* atributo = "valor"] Selector
El [attribute*="value"] selector se utiliza para seleccionar elementos cuyo valor de atributo contiene un valor especificado.
El siguiente ejemplo selecciona todos los elementos con un valor de atributo de clase que contiene "te" :
Nota: El valor no tiene por qué ser una palabra completa!
Formas de estilo
Los selectores de atributos pueden ser útiles para las formas de peinado sin class o ID :
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éntalo tú mismo " Consejo: Visita nuestra Tutorial Formas CSS para más ejemplos de cómo el estilo formularios con CSS.
Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 » Ejercicio 6»
Más ejemplos de selectores CSS
Utilice nuestro selector del probador de CSS para demostrar los diferentes selectores.
Para una referencia completa de todos los selectores CSS, por favor vaya a nuestro CSS Selectores de referencia .