Seleccionar elementos por atributo de datos en CSS

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

Author: BoltClock, 2011-03-16
Source

4 answers

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 característica de HTML5",

  • Por lo general, los navegadores no tienen problemas para admitir atributos no estándar, por lo que debería poder filtrarlos con selectores de atributos; y

  • No tienes que hacerlo. preocúpate por la validación de CSS, ya que CSS no se preocupa por los nombres de atributos sin espacio de nombres, siempre y cuando no rompan la sintaxis del selector.

 671
Author: BoltClock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-03-26 03:22:37

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 de jQuery, o usando document.querySelector

 89
Author: ocodo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-29 05:55:09

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

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

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

[attribute*=value] { /* contains selector */
/* Styles */
}
 34
Author: Matas Vaitkevicius,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-05-18 15:50:40

Puede combinar varios selectores y esto es tan genial saber que puede seleccionar cada atributo y atributo basado en su valor como href basado en sus valores con CSS solamente..

Selectores de atributos le permite jugar alrededor de algunos extra con id y class atributos

Aquí está una lectura impresionante Selectores de Atributos

Fiddle

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>

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

Puedes comprobar los detalles aquí.

 11
Author: Aamir Shahzad,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-30 13:01:26