En CSS, los selectores son patrones que se utilizan para seleccionar elementos DOM.
A continuación se muestra un ejemplo de uso de selectores. En el siguiente código, ay h1son selectores:
a { color: black; } h1 { font-size 24px; }Hoja de trucos de selectores comunes
headselecciona el elemento con la headetiqueta
.red selecciona todos los elementos con la clase 'roja'
#nav selecciona los elementos con el Id 'nav'
div.rowselecciona todos los elementos con la divetiqueta y la clase 'fila'
["]selecciona todos los elementos con el aria-hiddenatributo con un valor de "verdadero"
- Selector de comodines. Selecciona todos los elementos DOM. Vea a continuación para usarlo con otros selectores
Podemos combinar selectores de formas interesantes
Algunos ejemplos:
li aCombinador de descendientes DOM. Todas las aetiquetas que son secundarias a lietiquetas
div.row *selecciona todos los elementos que son descendientes (o secundarios) de los elementos con divetiqueta y clase 'fila'
li > aCombinador de diferencias. Seleccione descendientes directos, en lugar de todos los descendientes como los selectores de descendientes
li + aEl combinador adyacente. Selecciona el elemento que está inmediatamente precedido por el elemento anterior. En este caso, solo el primero adespués de cada uno li.
li, aSelecciona todos los aelementos y todos los lielementos.
li ~ aEl combinador de hermanos. Selecciona el aelemento que sigue a un lielemento.
Pseudo-selectores o clases pseudoestructurales
Estos también son útiles para seleccionar elementos estructurales del DOM.
Éstos son algunos de ellos:
:first-child Apunta al primer elemento inmediatamente dentro (o hijo de) otro elemento
:last-child Apunte al último elemento inmediatamente dentro (o hijo de) otro elemento
:nth-child()Apunta al enésimo elemento inmediatamente dentro (o hijo de) otro elemento. Admite números enteros, even, odd, o fórmulas
a:not(.name)Selecciona todos los aelementos que no son de la .nameclase.
::afterPermite insertar contenido en una página desde CSS, en lugar de HTML. Si bien el resultado final no está realmente en el DOM, aparece en la página como si lo estuviera. Este contenido se carga después de los elementos HTML.
::beforePermite insertar contenido en una página desde CSS, en lugar de HTML. Si bien el resultado final no está realmente en el DOM, aparece en la página como si lo estuviera. Este contenido se carga antes que los elementos HTML.
Podemos usar pseudoclases para definir un estado especial de un elemento del DOM. Pero no apuntan a un elemento por sí mismos.
Algunos ejemplos:
:hover selecciona un elemento que se desplaza con el puntero del mouse
:focus selecciona un elemento que recibe el foco desde el teclado o programáticamente
:active selecciona un elemento en el que se hace clic con el puntero del mouse
:link selecciona todos los enlaces en los que aún no se ha hecho clic
:visited selecciona un enlace en el que ya se ha hecho clic
Más información sobre el selector nth-child
El nth-childselector es una clase psuedo css que toma un patrón mediante el cual hacer coincidir uno o más elementos en relación con su posición entre hermanos.
Sintaxis
a:nth-child(pattern) { /* Css goes here */ }Patrón
Los patrones aceptados por nth-childpueden venir en forma de palabras clave o una ecuación de la forma An + B.
Palabras clave
Impar
Odd devuelve todos los elementos impares de un tipo determinado.
a:nth-childe(odd) { /* CSS goes here */ }Incluso
Even devuelve todos los elementos pares de un tipo determinado.
a:nth-childe(even) { /* CSS goes here */ }An + B
Devuelve todos los elementos que coinciden con la ecuación An + B para cada valor entero positivo de n (además de 0).
Por ejemplo, lo siguiente coincidirá con cada tercer elemento de anclaje:
a:nth-childe(3n) { /* CSS goes here */ }Juegos
CSS Diner es un juego web que enseña casi todo lo que hay que saber sobre la combinación de selectores.
Referencias adicionales
¡Hay muchos más selectores de CSS! Obtenga más información sobre ellos en CodeTuts, CSS-tricks.com o en Mozilla Developer Network.