html - selectores - Seleccionar elementos por atributo de datos en CSS

selectores css

Question

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

Answer 1

Puede combinar varios selectores y esto es muy bueno sabiendo que puede seleccionar cada atributo y atributo en función de su valor, como href base a sus valores solo con CSS.

Los selectores de atributos te permiten jugar un poco más con class atributos id y class

Aquí hay una lectura impresionante en los 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 consultar los detalles here .

Answer 2

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, todos los cuales están cubiertos en el documento al que estoy vinculado. Tenga en cuenta que, a pesar de que los atributos de datos personalizados son una "nueva característica de HTML5",

• los navegadores generalmente no tienen ningún problema para admitir atributos no estándar, por lo que debería poder filtrarlos con selectores de atributos; y

• usted tampoco tiene que preocuparse por la validación de CSS, ya que a CSS no le importan los nombres de atributos sin espacios de nombre, siempre y cuando no rompan la sintaxis del selector.

Answer 3

También es posible seleccionar atributos sin importar su contenido, en navegadores modernos

con:

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

[anything] {
   /* Styles */
}

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

Funciona en un porcentaje muy importante de navegadores.

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

Answer 4

Vale la pena destacar los selectores de atributos de subcadenas CSS3

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

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

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