Selector universal
* { color: red; }Aplica a todos los elementos del documento.
Selector de etiqueta
h1 { color: red; }Aplica a todos los elementos <h1>.
Selector descendente
body p { color: red; }Aplica a todos los <p> que sean descendientes de <body>.
Selector de clase
.parrafo { color: red; }<p class="parrafo">Lorem ipsum...</p>Selector de identificación
#primer_parrafo { color: red; }<p id="primer_parrafo">Lorem ipsum...</p>Selectores combinados
h1, #primer_parrafo { color: red; }Aplica a h1 y al elemento con id primer_parrafo.
Selector de hijos directos
body > p { color: red; }Aplica solo a <p> que son hijos directos de <body>, no a <p> dentro de un <div>.
Selector adyacente
h1 + h2 { color: red; }Aplica al <h2> que va inmediatamente después de un <h1>.
Selector de atributos
[attr] { color: red; } /* tiene el atributo */
[attr=val] { color: blue; } /* atributo igual a "val" */
[attr^=ho] { color: yellow; } /* atributo empieza con "ho" */
[attr$=au] { color: green; } /* atributo termina con "au" */Pseudo-clases
li:first-child { color: red; }
li:last-child { color: blue; }
li:nth-child(2n+1) { color: red; } /* impares */
li:nth-child(2n) { color: blue; } /* pares */
a:hover { ... } /* al pasar el mouse */
a:active { ... } /* al hacer click */
a:focus { ... } /* cuando tiene el foco */
a:visited { ... } /* enlaces visitados */Pseudo-elementos
h1::before { content: "Otro titulo "; }
h2::after { content: "..."; }
h3::first-letter { color: red; }
p::first-line { color: red; }