Selectores de atributos CSS
Estilo de elementos HTML con atributos específicos
Es posible diseñar elementos HTML que tengan atributos o valores de atributos específicos.
Selector de [atributo] CSS
El [attribute]selector se utiliza para seleccionar elementos con un atributo específico.
El siguiente ejemplo selecciona todos los elementos <a> con un atributo de destino:
Ejemplo
a[target] {
background-color: yellow;
}
Selector CSS [atributo="valor"]
El [attribute="value"]selector se utiliza para seleccionar elementos con un atributo y valor especificado.
El siguiente ejemplo selecciona todos los elementos <a> con un atributo target="_blank":
Ejemplo
a[target="_blank"] {
background-color: yellow;
}
CSS [atributo~="valor"] Selector
El [attribute~="value"]selector se utiliza para seleccionar elementos con un valor de atributo que contiene una palabra específica.
El siguiente ejemplo selecciona todos los elementos con un atributo de título que contiene una lista de palabras separadas por espacios, una de las cuales es "flor":
Ejemplo
[title~="flower"] {
border: 5px solid yellow;
}
El ejemplo anterior hará coincidir los elementos con 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, cuyo valor puede ser exactamente el valor especificado, o el valor especificado seguido de un guión (-).
Nota: El valor debe ser una palabra completa, ya sea sola, como class="top", o seguida de un guión (-), como class="top-text".
Ejemplo
[class|="top"] {
background: yellow;
}
Selector de [atributo^="valor"] de CSS
El [attribute^="value"]selector se utiliza para seleccionar elementos con el atributo especificado, cuyo valor comienza con el valor especificado.
El siguiente ejemplo selecciona todos los elementos con un valor de atributo de clase que comienza con "superior":
Nota: ¡El valor no tiene que ser una palabra completa!
Ejemplo
[class^="top"] {
background: yellow;
}
Selector CSS [atributo$="valor"]
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 "prueba":
Nota: ¡El valor no tiene que ser una palabra completa!
Ejemplo
[class$="test"] {
background: yellow;
}
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 que ser una palabra completa!
Ejemplo
[class*="te"] {
background: yellow;
}
Formas de estilo
Los selectores de atributos pueden ser útiles para diseñar formularios sin clase 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;
}
Sugerencia: Visite nuestro tutorial de formularios CSS para obtener más ejemplos sobre cómo diseñar formularios con CSS.
Todos los selectores de atributos CSS
| Selector | Example | Example description |
|---|---|---|
| [attribute] | [target] | Selects all elements with a target attribute |
| [attribute=value] | [target=_blank] | Selects all elements with target="_blank" |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word "flower" |
| [attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with "en" |
| [attribute^=value] | a[href^="https"] | Selects every <a> element whose href attribute value begins with "https" |
| [attribute$=value] | a[href$=".pdf"] | Selects every <a> element whose href attribute value ends with ".pdf" |
| [attribute*=value] | a[href*="w3schools"] | Selects every <a> element whose href attribute value contains the substring "w3schools" |