Hay muchas formas de seleccionar elementos en CSS. La selección más básica es por nombre de etiqueta, como p ( ). Casi cualquier cosa más específica que un selector de etiquetas usa atributos, classy IDambos seleccionan esos atributos en elementos HTML. Sin embargo, classy IDno son los únicos atributos desarrolladores pueden seleccionar. Podemos usar cualquiera de los atributos de un elemento como selectores.
La selección de atributos tiene una sintaxis especial. He aquí un ejemplo:
a(href="https://css-tricks.com") ( color: #E18728; )Ese es un selector de coincidencia exacta que solo seleccionará enlaces con el hrefvalor de atributo exacto de "https://css-tricks.com".
Los siete tipos diferentes
Los selectores de atributos distinguen entre mayúsculas y minúsculas de forma predeterminada (consulte la coincidencia que no distingue entre mayúsculas y minúsculas a continuación) y se escriben entre corchetes ().
Hay siete tipos diferentes de coincidencias que puede encontrar con un selector de atributo, y la sintaxis es diferente para cada uno. Cada uno de los selectores de atributos más complejos se basa en la sintaxis del selector de coincidencia exacta: todos comienzan con el nombre del atributo y terminan con un signo igual seguido del valor o valores del atributo, generalmente entre comillas. Lo que va entre el nombre del atributo y el signo igual es lo que marca la diferencia entre los selectores.
(data-value) ( /* Attribute exists */ ) (data-value="foo") ( /* Attribute has this exact value */ ) (data-value*="foo") ( /* Attribute value contains this value somewhere in it */ ) (data-value~="foo") ( /* Attribute has this value in a space-separated list somewhere */ ) (data-value^="foo") ( /* Attribute value starts with this */ ) (data-value|="foo") ( /* Attribute value starts with this in a dash-separated list */ ) (data-value$="foo") ( /* Attribute value ends with this */ )El valor contiene: el valor del atributo contiene un término como único valor, un valor en una lista de valores o como parte de otro valor. Para usar este selector, agregue un asterisco (*) antes del signo igual. Por ejemplo, img(alt*="art")seleccionará imágenes con el texto alternativo "arte abstracto" y "atleta iniciando un nuevo deporte", porque el valor "arte" está en la palabra "iniciando".
El valor está en una lista separada por espacios: el valor es el único valor de atributo o es un valor completo en un conjunto de valores separados por espacios. A diferencia del selector "contiene", este selector no buscará el valor como un fragmento de palabra. Para usar este selector, agregue una tilde (~) antes del signo igual. Por ejemplo, img(alt~="art")seleccionará imágenes con el texto alternativo "arte abstracto" y "exhibición de arte", pero no "atleta iniciando un nuevo deporte" (que seleccionaría el selector "contiene").
El valor comienza con: el valor del atributo comienza con el término seleccionado. Para usar este selector, agregue un signo de intercalación (^) antes del signo igual. No lo olvide, la distinción entre mayúsculas y minúsculas es importante. Por ejemplo, img (alt = "arte") seleccionará imágenes con el texto alternativo "exposición de arte" y "patrón artístico", pero no una imagen con el texto alternativo "Arthur Miller" porque "Arthur" comienza con una letra mayúscula. .
El valor es el primero en una lista separada por guiones: este selector es muy similar al selector "comienza con". Aquí, el selector coincide con un valor que es el único valor o el primero en una lista de valores separados por guiones. Para usar este selector, agregue un carácter de barra vertical (|) antes del signo igual. Por ejemplo, li(data-years|="1900")seleccionará elementos de la lista con un data-yearsvalor de "1900-2000", pero no el elemento de la lista con un data-yearsvalor de "1800-1900".
El valor termina con: el valor del atributo termina con el término seleccionado. Para usar este selector, agregue un signo de dólar ($) antes del signo igual. Por ejemplo, a(href$="pdf")selecciona todos los enlaces que terminan en .pdf.
Una nota sobre las comillas: puede ir sin comillas alrededor del valor en algunas circunstancias, pero las reglas para seleccionar sin comillas son inconsistentes en todos los navegadores. Las cotizaciones siempre funcionan, por lo que si sigue utilizándolas, puede estar seguro de que su selector funcionará.
Consulte los selectores de atributos de lápiz de CSS-Tricks (@ css-tricks) en CodePen.
Dato curioso: los valores se tratan como cadenas, por lo que no tiene que hacer ningún escape elegante de caracteres para que coincidan, como lo haría si usara caracteres inusuales en una clase o selector de ID.
(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )Coincidencia que no distingue entre mayúsculas y minúsculas
Los selectores de atributos que no distinguen entre mayúsculas y minúsculas son parte de la especificación de nivel 4 de selectores del Grupo de trabajo CSS. Como se mencionó anteriormente, las cadenas de valor de atributo distinguen entre mayúsculas y minúsculas, pero se pueden cambiar a mayúsculas y minúsculas agregando ijusto antes del corchete de cierre:
(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )La coincidencia que no distingue entre mayúsculas y minúsculas podría ser muy útil para los atributos de destino que contienen texto escrito por humanos impredecible. Por ejemplo, suponga que está diseñando un bocadillo de diálogo en una aplicación de chat y desea agregar una "mano saludando" a cualquier mensaje con el texto "hola" de alguna forma. Puede hacerlo solo con CSS, utilizando un comparador que no distingue entre mayúsculas y minúsculas para capturar todas las variaciones posibles:
Consulte la coincidencia de atributos CSS que no distinguen entre mayúsculas y minúsculas mediante CSS-Tricks (@ css-tricks) en CodePen.
Combinándolos
Puede combinar un selector de atributos con otros selectores, como etiqueta, clase o ID.
div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )O incluso combinar varios selectores de atributos. Este ejemplo selecciona imágenes con texto alternativo que incluye la palabra "persona" como el único valor o un valor en una lista separada por espacios, y un srcvalor que incluye el valor "lorem":
img(alt~="person")(src*="lorem") ( /* style rules here */ )Consulte Atributos combinados de lápiz y selección de solo atributo mediante CSS-Tricks (@ css-tricks) en CodePen.
Selectores de atributos en JavaScript y jQuery
Los selectores de atributos se pueden usar en jQuery como cualquier otro selector de CSS. En JavaScript, puede utilizar selectores de atributos con document.querySelector()y document.querySelectorAll().
Vea los selectores de atributos de lápiz en JS y jQuery por CSS-Tricks (@ css-tricks) en CodePen.
Relacionado
- clase
- IDENTIFICACIÓN
Más información
- Lo flaco de los selectores de atributos
- Selectores de atributos en MDN
- Selectores de atributos en la especificación CSS de W3C
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| Alguna | Alguna | Alguna | Alguna | 7+ | Alguna | Alguna |