Día 73: CSS Attribute Selectors
La ruta del desarrollador web frontend autónomo🤹♂️
Table of contents
- Estilo de elementos HTML con atributos específicos
- Selector [attribute]
- Selector [attribute="value"]
- Selector [attribute~="value"]
- Selector [attribute|="value"]
- Selector [attribute^="value"]
- Selector [attribute$="value"]
- Selector [attribute*="value"]
- Formas de estilo
- Todos los selectores de atributos CSS
- Resumen
Estilo de elementos HTML con atributos específicos
Es posible diseñar elementos HTML que tengan atributos o valores de atributos específicos.
Selector [attribute]
El selector [attribute] se utiliza para seleccionar elementos con un atributo específico.
El siguiente ejemplo selecciona todos los elementos <a> con un atributo de destino:
Ejemplo:
Selector [attribute="value"]
El selector [attribute="value"] se utiliza para seleccionar elementos con un atributo y valor especifico.
El siguiente ejemplo selecciona todos los elementos <a> con un atributo target="_blank":
Ejemplo:
Selector [attribute~="value"]
El selector [attribute~="value"] se utiliza para seleccionar elementos con un valor de atributo que contengan una palabra específica.
El siguiente ejemplo selecciona todos los elementos con un atributo title que contiene una lista de palabras separadas por espacios, una de las cuales es "flower":
Ejemplo:
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".
Selector [attribute|="value"]
El selector [attribute|="value"] 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 (-), comoclass="top-text".
Ejemplo:
Selector [attribute^="value"]
El selector [attribute^="value"] 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 tipo clase que comienza con "top":
Nota: El valor no tiene que ser una palabra completa
Ejemplo:
Selector [attribute$="value"]
El selector [attribute$="value"] se usa para seleccionar elementos cuyo valor de atributo termina con un valor específico.
El siguiente ejemplo selecciona todos los elementos con un valor de atributo tipo clase que termina con "test":
Nota: El valor no tiene que ser una palabra completa.
Ejemplo:
Selector [attribute*="value"]
El selector [attribute*="value"] se utiliza para seleccionar elementos cuyo valor de atributo contiene un valor específico.
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:
Formas de estilo
Los selectores de atributos pueden ser útiles para diseñar formularios sin clase o ID:
Ejemplo:
Todos los selectores de atributos CSS
| Selector | Ejemplo | Descripción del ejemplo | ||
[attribute] | [target] | Selecciona todos los elementos con un atributo de destino. | ||
[attribute=value] | [target="_blank"] | Selecciona todos los elementos con target="_blank”. | ||
[attribute~=value] | [title~="flower"] | Selecciona todos los elementos con un atributo title que contiene la palabra "flower”. | ||
| `[attribute | =value]` | `[lang | ="en"]` | Selecciona todos los elementos con un valor de atributo lang que comienza con "en”. |
[attribute^=value] | a[href^="https"] | Selecciona cada elemento <a> cuyo valor de atributo href comienza con "https”. | ||
[attribute$=value] | a[href$=".pdf"] | Selecciona cada elemento <a> cuyo valor de atributo href termina con ".pdf”. | ||
[attribute*=value] | a[href*="w3schools"] | Selecciona cada elemento <a> cuyo valor de atributo href contiene la subcadena "w3schools”. |
Resumen
Los selectores de atributos CSS permiten diseñar elementos HTML con atributos o valores de atributos específicos. Se pueden utilizar varios tipos de selectores, como [attribute] para seleccionar elementos con un atributo específico, [attribute="value"] para seleccionar elementos con un atributo y valor específicos, y [attribute^="value"] para seleccionar elementos con un valor de atributo que comienza con un valor específico. Estos selectores son útiles para diseñar formularios sin clase o ID.
Traducido con 💚 desde W3Schools.com