Selectores CSS

Utilizamos la parte que precede el bloque entre llaves de una regla CSS para describir aquel/aquellos elementos HTML que seleccionaremos al aplicar nuestro estilo.
La siguiente tabla muestra todas las posibles sintaxis (CSS3) por categorias

Lista de selectores CSS

Selector	Descripción	Ejemplos
Categoria: Selectores idenfificativos de elementos
E	Cualquier elemento E del documento HTML o XML	h1 { color: grey; }
A,B,C...	Agrupar elementos	h1,h2,h3 { color:grey; }
*	Selector universal para todo elemento	* { color:grey; }
.clase	Aquel/Aquellos elementos con atributo class="clase"	E.miclase { color:grey; }
.clase1.clase2...	Aquellos elementos cuyo atributo 'class' contiene los valores clase1,clase2,... No importa el orden	code.javascript.strong { color:grey; }
#ID	Aquel elemento con el atributo id="ID"	#miID { color:gray; }
Categoria: Selectores de atributo
E[atrib]	Aquel elemento E con un atributo cuyo nombre es 'atrib'	img[alt] { color:gray; }
E[atrib="x"]	Cualquier elemento E cuyo atributo 'atrib' tiene exactamente el valor 'x'	a[href="#ancla"] { color:grey; }
E[atrib~="x"]	Cualquier elemento E cuyo atributo 'atrib' contiene el valor 'x' en su lista de valores	strong[href~="important"] { color:grey; }
E[atrib*="x"]	Cualquier elemento E cuyo atributo 'atrib' contiene la subcadena 'x'	a[href*="google"] { color:grey; }
E[atrib^="x"]	Aquel/Aquellos elementos E cuyo atributo 'atrib' empieza por 'x'	a[href^="http:"] { color:grey; }
E[atrib$="x"]	Cualquier elemento E cuyo atributo 'atrib' termina en 'x'	img[alt$=".jpg"] { color:grey; }
E[atrib|="x"]	Cuando el valor de 'atrib' tiene exactamente el valor 'x' o 'x-'	img[alt|="figure"] { color:grey; }
Categoria: Selectores de parentesco según la estructura del docuemnto
C E	Cualquier elemento E descendiente de C	main img { margin:10px; }
C > E	Cualquier elemento E hijo de C	section>h2 { color:grey; }
E + D	Selecciona el elemento D hermano adyacente de E	header + footer { color:grey }
E ~ D	Selecciona el elemento D hermano de E, aunque no sea adyacente	h1 ~ ol { color:grey; }
Categoria: Selectores de pseudo-clases (según el estado de ciertos elementos, del estado del documento, o de ciertos patrones del marcado)
1: pseudo-clases dinámicas
1.1: según el estado de hipervínculos
a:link	hipervínculos aún no visitados	a:link { color:gray; }
a:visited	hipervínculos visitados	a:visited { color:gray; }
1.2: por la acción del ususario
:focus	Elemento que tiene el foco, es decir, acepta entrada de texto o ha sido activado de algún modo	a:focus { color:gray; }
:hover	Elemento en el cual se coloca el puntero del ratón	a:hover { color:gray; }
:active	Elemento activado por el usuario, por ejemplo, durante el tiempo que se pulsa un hipervínculo	a:active { color:gray; }
1.3: según el estado de la IU
:enabled	Elementos de la interfaz de usuario habilitados para la entrada	:enabled { font-weight: bold; }
:disabled	Elementos de IU no disponibles para la entrada	:disabled { opacity: 0.5; }
:checked	botones radio o cajas de selección que han sido seleccionadas(por el usuario o predefinido en el documento	:checked { color:grey; }
:indeterminate	botones radio o cajas de selección que no se han seleccionado o deseleccionado en ningún momento.(solo determinado via scripts DOM)	:indeterminate { border: red; }
:default	Botones radio, cajas de selección o 'option' que han sido seleccionadas por defecto	[type:"checkbox"]:default { font-style: italic; }
:valid	Entradas de usuario cuyos datos son semanticamente válidos	input[type="email"]:valid { color:grey; }
:invalid	Entradas de usuario cuyos datos son semanticamente inválidos	input[type:"email"]:invalid { color:grey; }
:in-range	Entradas de usuario cuyos valores se encuentran en el rango predefinido	input[type="number"]:in-range { color:grey; }
:out-of-range	Entradas de usuario cuyos valores estan fuera del rango permitido por el control de formulario	input[type="number"]:out-of-range { color:grey; }
:required	Entradas de usuario en las que es obligatorio definir un valor	input:required { color:grey; }
:optional		input:optional { color:grey; }
:read-write	Entrada de usuario editable	pre:read-write { color:grey; }
:read-only	Entrada de usuario no editable	textarea:read-only { color:grey; }
2: pseudo-clases estructurales
E:first-child	Selecciona el primer hijo del tipo E	li:first-child { color:gray; }
E:last-child	Selecciona el último hijo del tipo E	li:last-child { color:gray; }
E:first-of-type	Selecciona el primer hijo del tipo E	img:first-of-type {background-color: red; }
E:last-of-type	Selecciona el último hijo del tipo E	img:last-of-type {background-color: red; }
:root	Selecciona el elemento raíz del documento	:root { border:1px solid red; }
E:empty	Selecciona elementos E sin contenido (ni texto)	p:empty { display:none; }
E:only-child	Selecciona elementos E que son hijos únicos	p:only-child { color:gray; }
E:only-of-type	Selecciona el elemento del tipo E, único de entre sus hermanos	img:only-of-type { background-color: #CCC; }
E:nth-child(an+-b)	Siendo a,b enteros y n=(0,1,2,3,...), selecciona cada elemento hijo E según dicha expresión	tr:nth-child(7) { color:grey; } tr:nth-child(2n) { color:grey; }
nth-last-child(an+-b)	Lo mismo, empezando por el último elemento	tr:nth-last-child(odd) { color:grey; }
E:nth-of-type(an+-1)	Lo mismo, seleccionando solo el tipo E	a:nth-of-type(even) { color:grey; }
E:nth-last-of-type(an+-1)	Lo mismo, desde el último elemento	a:nth-last-of-type(even) { color:grey; }
:target	Referencia a aquel elemento objetivo de un identificador de fragmento URL	*:target { color:grey; }
:lang(<language>)	Elementos definidos para un tipo de lenguaje	*:lang(es) { color:grey; }
:not()	Niega la coincidéncia especificada	li:not(.info) { color:grey; }
Categoria: Selectores pseudo-elementos
E::first-letter	Estiliza la primera letra de E	p::first-letter { color:grey; }
E::first-line	Estiliza la primera línea del elemento E	p::first-line { color:grey; }
E::before	Crea y estiliza contenido adicional antes del elemento E. Debe contener la propiedad 'content'.	h2::before { content: "x"; color:grey; }
::after	Crea y estiliza contenido adicional después del elemento E. Debe contener la propiedad 'content'.	h2::after { content: "x"; color:grey; }

NOTAS:(Solicitar información más detallada a través de los comentarios)

<TO-DO>