Selectores CSS

En el CSS hay dos tipos de "pseudo-cosas": pseudo-clases y pseudo-elementos.

Las pseudo-clases (:link, :visited, :active, :hover, :focus, :first-child, :lang... ) actúan como si añadieran una clase al elemento.
Los pseudo-elementos (::first-letter, ::first-line, ::before, ::after) actúan como si nuevos elementos fueran insertados en el documento.

Los dos puntos dobles ( :: ) fueron introducidos en el CSS3 como un intento de hacer una distinción entre las :pseudo-clases y los ::pseudo-elementos. Por suerte no pasa nada si no ponemos los dos puntos dobles delante de los pseudo-elementos ( ::before ), ya que la mayoría de los navegadores entienden el formato antiguo introducido en el CSS2 ( :before ). Es más: IE8 parece no entender los dos puntos dobles ( ::before ), pero sí entiende los dos puntos ( :before ).

Una tabla inspirada por w3schools - CSS Selector Reference

Selector	Ejemplo	Descripción	CSS
.class	.laClase	Selecciona todos los elementos con class="laClase"	1
#id	#elId	Selecciona todos los elementos con id="elId"	1
*	*	Selector comodin. Selecciona todos los elementos.	2
elemento	p	Selecciona todos los elementos <p>	1
elemento, elemento	div,p	Selecciona todos los elementos <div> y <p>	1
elemento elemento	div p	Selecciona todos los elementos <p> dentro de los elementos <div>	1
elemento > elemento	div> p	Selecciona todos los <p> cuyo elemento padre es un <div>	2
elemento + elemento	div+p	Selecciona todos los <p> situados inmediatamente después de un <div>	2
elemento1 ~ elemento2	p ~ ul	Selecciona cada <ul> precedido por un <p>	3
[attributo]	[target]	Selecciona todos los elementos con un atributo target.	2
[attributo = valor]	[target=_blank]	Selecciona todos los elementos con un atributo target="_blank"	2
[attributo ~= contiene]	[title ~= primero]	Selecciona todos los elementos con un atributo title que contiene "primero" de una lista de palabras separadas por espacios: ( selecciona: title = "primero parafo", title = "primero titulo", etc... )	2
[attributo |= empieza]	[lang|=en]	Selecciona todos los elementos con un atributo lang que empieza con "en" de una lista de elementos separados por guiones: ( selecciona: lang = "en", lang = "en-US" y lang = "en-cockney" )	2
[attributo ^= empieza]	a[src ^= "https"]	Selecciona todos los <a> con un atributo src que empieza con"https".	3
[attributo $= acaba]	a[src$=".pdf"]	Selecciona todos los <a>con un atributo src que acaba con ".pdf"	3
[attributo *= contiene]	a[src *= "css3"]	Selecciona todos los <a> con un atributo src que contiene "css3"	3
:link	a:link	Selecciona todos los enlaces no visitados	1
:visited	a:visited	Selecciona todos los enlaces visitados	1
:active	a:active	Selecciona todos los enlaces activos	1
:hover	a:hover	Selecciona todos los enlaces al pasar por encima.	1
::before	p:before	Inserta contenido delante de cada elemento<p>	2
::after	p:after	Inserta contenido después de cada elemento<p>	2
:lang(language)	p:lang(es)	Selecciona cada <p> con un atributo lang="es" ( español )	2
:nth-child(n)	p:nth-child(2)	Selecciona cada <p> que sea el segundo hijo de su padre.	3
:nth-last-child(n)	p:nth-last-child(2)	Selecciona todos los <p> que sean el penúltimo hijo de su padre. ( El segundo a partir del último )	3
:nth-of-type(n)	p:nth-of-type(2)	Selecciona cada <p> que sea el segundo <p> hijo de su padre.	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selecciona todos los <p> que sean el penúltimo <p> hijo de su padre. ( El segundo a partir del último )	3
:first-letter	p:first-letter	Selecciona la primera letra de cada <p>.	1
:first-line	p:first-line	Selecciona la primera lí de cada <p>.	1
:first-child	p:first-child	Selecciona cada <p> que sea el primer hijo de su padre.	2
:first-of-type	p:first-of-type	Selecciona todos los <p> que sean el primer <p> hijo de su padre.	3
:only-child	p:only-child	Selecciona todos los <p> que sean el único hijo de su padre.	3
:only-of-type	p:only-of-type	Selecciona todos los <p> que sean el único <p> hijo de su padre.	3
:last-child	p:last-child	Selecciona todos los <p> que sean el último hijo de su padre.	3
:last-of-type	p:last-of-type	Selecciona todos los <p> que sean el último <p> hijo de su padre.	3
:root	:root	Selecciona el elemento raíz de los documentos. En HTML el elemento raíz es siempre el <html.>	3
:empty	p:empty	Selecciona cada <p> qu NO tenga elementos hijos ( Esto implica que tampoco puede tener texto. )	3
:target	#news:target	El selector de destino :target se puede usar para aplicar estilos al elemento de destino activo.	3
:not(selector)	:not(p)	Selecciona todos los elementos que NO sean un párafo ( <p> ).	3
::selection	::selection	Selecciona la parte de un elemento seleccionada por el usuario.

Pseudo-clases para UI ( interfaz de usuario )

Afecta a los elementos de interfaz de usuario, como por ejemplo los elementos de formulario.

Selector	Ejemplo	Descripción
:focus	input:focus	Selecciona el elemento <input> enfocado.
:focus-within	form:focus-within	Selecciona un elemento, por ejemplo un formulario, que tiene un elemento hijo focusado..
:enabled	input:enabled	Selecciona todos los elementos <input> que están habilitados ( permiten la escritura ).
:disabled	input:disabled	Selecciona todos los elementos <input> deshabilitados ( que no permiten la escritura )
:checked	input:checked	Selecciona todos los elementos <input> ( botones de radio o casillas de verificación ) marcados ( checked )
:indeterminate	input:indeterminate	Se refiere a las casillas de verificación o botones de radio que no están ni activadas ( checked ) ni desactivadas ( unchecked ) ¡OJO! En HTML no existe un atributo "indeterminate". Es posible hacer que una casilla de verificación sea indeterminate, solo a través de javascript: checkbox.indeterminate = true;
:default	input:default ~ label{ border:1px solid red; }	Se refiere a las casillas de verificación o botones de radio que están habilitados por defecto. ( No cambia al marcar otra casilla ).
:valid	input[required]:valid{ box-shadow: green; }	Se refiere a los elementos de formulario que cumplen los requisitos necesarios.
:invalid	input[required]:invalid{ box-shadow: red; }	Se refiere a los elementos de formulario que NO cumplen los requisitos necesarios.
:in-range	input:in-range	Selecciona los elementos cuyo valor esta dentro de los limites establecidos ( por los atributos min y max ) <input type="number" min="1" max="10" value="5">
:out-of-range	input:out-of-range	Selecciona los elementos cuyo valor esta fuera de los limites establecidos ( por los atributos min y max ) <input type="number" min="1" max="10" value="15">
:required	input:required	Selecciona los elementos de formulario obligatorios ( que tienen un atributo required )
:optional	input:optional	Selecciona los elementos de formulario opcionales ( que no tienen un atributo required )
:read-write	input:read-write	Selecciona los elementos de formulario que pueden ser editados por el usuario (elementos contenteditable = "true" o elementos input que no tienen un atributo readonly ).
:read-only	input:read-only	Selecciona los elementos de formulario que NO pueden ser editados por el usuario (elementos input que tienen un atributo readonly ).