Selectores CSS

Selectores	Ejemplo	Descripción
*	*	Selecciona todos los elementos.
element	h1	Selecciona todos los elementos <h1>.
#id	#box-1	Selecciona el elemento que tenga como atributo id='box-1'.
.class	.bg-red	Selecciona todos los elementos que tengan asignada la clase 'bg-red' (class='bg-red').
selector1, selector2	h1, h2	Selecciona todos los elementos <h1> y todos los elementos <h2>.
selector1 selector2	#box-1 h2	Selecciona todos los elementos <h2> que son descendientes del elemnto con id='box-1'.
selector1>selector2	#box-1>p	Selecciona todos los elementos <p> que son hijos del elemento con id='box-1'.
selector1+selector2	h1 + p	Selecciona todos los elementos <p> que están inmediatamente despues de un elemento <h1>.
selector1~selector2	h1 ~ p	Selecciona cada elemento <p> que está precedido por un elemento <h1>.
element.class	div.bg-red	Selecciona todos los elementos <div> que tienen asignada la clase 'bg-red' (class='bg-red').

Pseudo Clases

Selectores	Ejemplo	Descripción
:hover	#btn-1:hover	Se activa cuando el usuario interactua con un dispositivo señalador sobre el elemento con id=btn-1.
:link	a:link	Selecciona todos los links no visitados.
:active	a:active	Selecciona el link activo.
:visited	a:visited	Selecciona todos los links visitados.
:nth-child()	tr:nth-child(3)	Selecciona el tercer elemento <tr> de una tabla. Acepta tambien los parametros 'odd' y 'even' para seleccionar elementos pares e impares.

Selectores	Ejemplo	Descripción
::after	p::after	Inserta algo después del contenido de cada elemento <p>.
::before	p::before	Inserta algo antes del contenido de cada elemento <p>.
::first-letter	p::first-letter	Selecciona la primer letra de todos los elementos <p>.
::first-line	p::first-line	Selecciona la primer linea de texto de todos los elementos <p>.