Selectores de atributos CSS

Aprenda a utilizar los selectores de atributos CSS

En esta publicación presentaré los selectores de atributos.

Ver tambiénuna introducción a los selectores CSS básicos. Allí presento varios de los selectores CSS básicos: uso de selectores de tipo, clase, id, cómo combinarlos, cómo apuntar a múltiples clases, cómo diseñar varios selectores en la misma regla, cómo seguir la jerarquía de páginas con child y direct selectores secundarios y hermanos adyacentes.

Selectores de presencia de atributos

El primer tipo de selector es el selector de presencia de atributos.

Podemos comprobar si un elementoposeeun atributo usando el[]sintaxis.p[id]seleccionará todopetiquetas en la página que tienen unidatributo, independientemente de su valor:

p[id] {
  /* ... */
}

Selectores de valor de atributo exacto

Dentro de los corchetes puede verificar el valor del atributo usando=, y el CSS se aplicará solo si el atributo coincide con el valor exacto especificado:

p[id="my-id"] {
  /* ... */
}

Coincidir con una porción de valor de atributo

Mientras=Permítanos verificar el valor exacto, tenemos otros operadores:

  • *=comprueba si el atributo contiene el parcial
  • ^=comprueba si el atributo comienza con el parcial
  • $=comprueba si el atributo termina con el parcial
  • |=comprueba si el atributo comienza con el parcial y va seguido de un guión (común en las clases, por ejemplo), o simplemente contiene el parcial
  • ~=comprueba si el parcial está contenido en el atributo, pero separado por espacios del resto

Todos los controles que mencionamos sondistingue mayúsculas y minúsculas.

Si agrega unijusto antes del corchete de cierre, el cheque no distinguirá entre mayúsculas y minúsculas. Es compatible con muchos navegadores, pero no en todos, compruebehttps://caniuse.com/#feat=css-case-insensitive.

Descarga mi gratisManual de CSS


Más tutoriales de CSS: