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.

Más tutoriales de CSS:

• La guía de Flexbox
• Tutorial de cuadrícula CSS
• Variables CSS (propiedades personalizadas)
• Introducción a PostCSS
• La propiedad de margen CSS
• Cómo centrar un elemento con CSS
• Fuentes del sistema CSS
• Cómo imprimir tu HTML con estilo
• Una guía introductoria a las transiciones CSS
• Un tutorial de animaciones CSS
• Introducción a CSS
• La guía CSS
• Cómo configurar Tailwind con PurgeCSS y PostCSS
• La hoja de trucos de Tailwind
• Cómo rotar continuamente una imagen usando CSS
• Hacer que una tabla responda usando CSS
• Cómo depurar CSS biseccionando
• Selectores CSS
• Cascada CSS
• Especificidad CSS
• Selectores de atributos CSS
• Colores CSS
• Unidades CSS
• URL de CSS ()
• Tipografía CSS
• El modelo de caja CSS
• La propiedad de posición CSS
• Consultas de medios CSS y diseño receptivo
• Consultas de funciones CSS
• Transformaciones CSS
• Cómo diseñar listas usando CSS
• Prefijos de proveedores de CSS
• Herencia CSS
• Pseudoclases CSS
• Pseudoelementos CSS
• Diseñar tablas HTML con CSS
• La propiedad de visualización de CSS
• La función CSS calc ()
• Bordes CSS
• Importando un archivo CSS usando @import
• Manejo de errores CSS
• Filtros CSS
• Tamaño de caja CSS
• Fondos CSS
• Comentarios CSS
• Fuentes CSS
• Relleno CSS
• La propiedad flotante de CSS y su compensación
• Normalización de CSS
• La propiedad de índice z de CSS
• Cómo deshabilitar la selección de texto usando CSS
• Cómo poner un elemento en la parte inferior de su contenedor usando CSS
• Cómo invertir colores usando CSS
• Etiquetas previas receptivas en CSS
• Incrustaciones de video de YouTube receptivas
• ¿Cuáles son los buenos valores de CSS Breakpoint para Responsive Design?
• Cómo alinear el centro en flexbox