html selectors - Seleccionar elementos por atributo de datos en CSS




avanzados padre (5)

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 .

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


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


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

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.


En las soluciones anteriores, la selección se detiene, pero el usuario aún cree que puede seleccionar texto porque el cursor aún cambia. Para mantenerlo estático, tendrás que configurar tu cursor CSS:

.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Esto hará que su texto sea totalmente plano, como si estuviera en una aplicación de escritorio.





html css html5 css-selectors custom-data-attribute