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, a
y h1
son selectores:
a { color: black; } h1 { font-size 24px; }
Hoja de trucos de selectores comunes
head
selecciona el elemento con la head
etiqueta
.red
selecciona todos los elementos con la clase 'roja'
#nav
selecciona los elementos con el Id 'nav'
div.row
selecciona todos los elementos con la div
etiqueta y la clase 'fila'
["]
selecciona todos los elementos con el aria-hidden
atributo 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 a
Combinador de descendientes DOM. Todas las a
etiquetas que son secundarias a li
etiquetas
div.row *
selecciona todos los elementos que son descendientes (o secundarios) de los elementos con div
etiqueta y clase 'fila'
li > a
Combinador de diferencias. Seleccione descendientes directos, en lugar de todos los descendientes como los selectores de descendientes
li + a
El combinador adyacente. Selecciona el elemento que está inmediatamente precedido por el elemento anterior. En este caso, solo el primero a
después de cada uno li
.
li, a
Selecciona todos los a
elementos y todos los li
elementos.
li ~ a
El combinador de hermanos. Selecciona el a
elemento que sigue a un li
elemento.
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 a
elementos que no son de la .name
clase.
::after
Permite 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.
::before
Permite 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-child
selector 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-child
pueden 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.