Seleccionar elementos por atributo de datos en CSS

488

¿Es posible seleccionar elementos en CSS por sus atributos de datos HTML5 (por ejemplo data-role)?

— Diogo Cardoso
fuente

776

Si te refieres a usar un selector de atributos , claro, ¿por qué no?

[data-role="page"] {
    /* Styles */
}

Hay una variedad de selectores de atributos que puede usar para varios escenarios que están cubiertos en el documento al que enlazo. Tenga en cuenta que, a pesar de que los atributos de datos personalizados son una "nueva función HTML5",

los navegadores generalmente no tienen problemas para admitir atributos no estándar, por lo que debería poder filtrarlos con selectores de atributos; y
tampoco tiene que preocuparse por la validación de CSS, ya que a CSS no le importan los nombres de atributos sin espacio de nombres siempre que no rompan la sintaxis del selector.

— BoltClock
fuente

44

¿Es compatible con todos los navegadores?

— Christophe Debove

21

@ Christopher Debove: IE7 + y todo lo demás.

— BoltClock

77

CSS no parece detectar esto si el atributo de datos se establece o cambia a través de JS.

— ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

30

Después de una investigación más profunda, parece $("#element").data("field","value");que no cambia el valor de los atributos de datos, solo modifica la versión en caché de jQuery del DOM. Para cambiar el atributo DOM real, uno debe usar $("#element").attr("data-field","value");. Hacer mi comentario original inválido.

— ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

2

Sí, parece que cambiar el conjunto de datos también funciona bien @Matthew - jsfiddle.net/BoltClock/k378xgj3 Gracias por nada jQuery.

— BoltClock

107

También es posible seleccionar atributos independientemente de su contenido, en los navegadores modernos

con:

[data-my-attribute] {
   /* Styles */
}

[anything] {
   /* Styles */
}

Por ejemplo: http://codepen.io/jasonm23/pen/fADnu

Funciona en un porcentaje muy significativo de navegadores.

Tenga en cuenta que esto también se puede usar en un selector JQuery, o usando document.querySelector

— ocodo
fuente

¡Wow, nunca vi que podría usarse así! +1! Y FWIW, ahora que los navegadores han caducado, creo que funciona en IE7 +, por lo que su compatibilidad es bastante omnipresente. Es curioso que ni siquiera Chris Coyier lo haya mencionado aquí

— Camilo Martin el

Gracias @CamiloMartin He eliminado el enlace de los navegadores para evitar confusiones / molestias.

— ocodo

Se agregó un enlace al hilo de Chris Coyier css-tricks.com/attribute-selectors/#comment-965838 @CamiloMartin

— ocodo

1

De todos modos, ninguna de estas sintaxis es nueva: más personas se sorprendieron de que IE6 no lo admitiera que IE7 +. Puede suponer que todos los selectores CSS2.1 son compatibles con IE8 y posteriores; IE7 hace la mayoría, aunque con algunos errores oscuros. Todos los navegadores modernos han admitido selectores de nivel 3 por un tiempo, con Chrome como el que tiene errores.

— BoltClock

1

Sin embargo, dado que estamos en el tema de los selectores de atributos, es interesante observar que los selectores de atributos de subcadena que se introdujeron en el nivel 3 ( ^=, *=y $=) también son compatibles con IE7 e IE8. Tal vez se introdujeron en IE antes de ser estandarizados.

— BoltClock

47

Vale la pena señalar los selectores de atributos de la subcadena CSS3

[attribute^=value] { /* starts with selector */
/* Styles */
}

[attribute$=value] { /* ends with selector */
/* Styles */
}

[attribute*=value] { /* contains selector */
/* Styles */
}

— Matas Vaitkevicius
fuente

13

Puede combinar múltiples selectores y esto es genial sabiendo que puede seleccionar cada atributo y atributo en función de su valor, hrefsegún sus valores solo con CSS.

Los selectores de atributos te permiten jugar con algunos atributos adicionales idyclass

Aquí hay una lectura impresionante sobre los selectores de atributos

Violín

a[href="http://aamirshahzad.net"][title="Aamir"] {
  color: green;
  text-decoration: none;
}

a[id*="google"] {
  color: red;
}

a[class*="stack"] {
  color: yellow;
}

<a href="http://aamirshahzad.net" title="Aamir">Aamir</a>
<br>
<a href="http://google.com" id="google-link" title="Google">Google</a>
<br>
<a href="http://stackoverflow.com" class="stack-link" title="stack">stack</a>

Expandir fragmento

Soporte de navegador:
IE6 +, Chrome, Firefox y Safari

Puedes consultar los detalles aquí .

— Aamir Shahzad
fuente

4

    [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 */
}

— Naved Khan
fuente