Propiedades Medias CSS: Selectores Detallados

TUTORIAL REALIZADO POR PYRITE WOLF DE SOURCECODE

Hey! He vuelto al mundo luego de mucho tiempo sin internet xD Y tras mucho tiempo haciendo skins en libretas y cosas por el estilo me acordé de que... ¡nunca terminé mi serie de tutoriales de CSS! Así que en este tuto intentaré retomar y enseñarles a quienes ya han leido los tutoriales básicos y los han practicado algunas cosas apenas más avanzadas. Hoy conoceremos algunos selectores más detallados, es decir, algunas formas especiales de "llamar" objetos del HTML al CSS para editarlos. Dudo que esta lista esté completa, así que ¡por favor comenten añadiendo cualquier cosa que crean que falte!


#descripcion #subforo - Colocando dos selectores seguidos se logra seleccionar a todos los segundos elementos que estén dentro del primero; en este caso, a todos los elementos con las id subforo que estén dentro de un elemento con id descripcion.
#descripcion, #tablon - Colocando una coma entre dos selectores se logra seleccionar a ambos elementos; en este caso, a todos los elementos con las id descripcion y tablon.
#descripcion + #subforos - Colocando un simbolo + entre dos selectores se logra seleccionar a elementos que estén inmediatamente seguidos; en este caso, a todos los elementos con las id subforos que estén inmediatamente después de un elemento con id descripción.
#descripcion:first-child - Permite seleccionar al primer objeto dentro de un elemento; en este caso, al primer elemento dentro de aquel que tiene una id descripcion.
#descripcion:last-child - Permite seleccionar al último objeto dentro de un elemento; en este caso, al último elemento dentro de aquel que tiene una id descripcion.
#descripcion:first-of-type - Actualmente también funciona con :first en foroactivo, dado que añadieron una librería de JavaScript que así lo permite; este selector nos deja seleccionar sólo al primer objeto con el nombre elegido; en este caso, al primer elemento que tiene una id descripcion.
#descripcion:last-of-type - Actualmente también funciona con :last en foroactivo, dado que añadieron una librería de JavaScript que así lo permite; este selector nos deja seleccionar sólo al último objeto con el nombre elegido; en este caso, al último elemento que tiene una id descripcion.
#descripcion:nth-child(5) - Esto nos permite seleccionar al quinto elemento con el nombre elegido; en este caso, al quinto elemento que tiene una id descripcion (el 5 se puede modificar por cualquier otro número).
#descripcion:nth-last-child(5) - Esto nos permite seleccionar al quinto elemento con el nombre elegido contando desde el último hacia el primero; en este caso, al quinto elemento (contando desde el final hacia el principio) que tiene una id descripcion (el 5 se puede modificar por cualquier otro número). Básicamente, como el anterior a la inversa.
::selection - Esto nos permite seleccionar cualquier cosa que esté seleccionada con el cursor, permite darle color y estilo.
:not(#descripcion) - Esto nos permite seleccionar cualquier cosa que no sea lo que hemos nombrado entre paréntesis, en este caso, seleccionará a todo menos a los elementos que tengan la id descripción.
#descripcion[style="height: 100px;"] - Esto seleccionará a las cajas llamadas descripción que tengan el atributo style="height: 100px;". Debe escribirse el atributo tal cual está escrito en el HTML.

Si quieres jugar y experimentar con estos selectores, te recomiendo usar http://jsfiddle.net.
Cualquier dato que sepas que falte o consulta que quieras hacer, deja un aviso aquí ^^