Los selectores de descendientes permiten especificar un elemento que está contenido dentro de otro elemento. Veamos el siguiente caso:
h1 {color: red}
p {color: black}
em {color: red}
Con estas reglas de estilo, el texto de los títulos sería rojo, el texto de los párrafos sería negro y el texto con énfasis también sería rojo. De este modo podemos destacar palabras dentro de un párrafo cambiando su color. Pero, nos resultaría imposible hacer lo mismo dentro de un título porque tanto h1 como em son de color rojo.
Con un selector de descendiente podemos hacer que el elemento em sea de color azul en los casos en que se encuentre dentro de un elemento h1 (es decir, sea un descendiente de h1). La forma de especificar esta relación es usando ambos selectores (h1 y em) separados por un espacio, poniendo en primer lugar el elemento padre:
h1 em {color: blue}
Con el agregado de este selector a la Hoja de Estilo, cuando destaquemos una palabra de un párrafo será de color rojo, pero si destacamos una palabra de un título será de color azul.
Si se deja un espacio entre dos elementos, se aplica el estilo al segundo elemento cuando sea descendiente del primero.
Si se quiere aplicar el estilo a todos los elementos, deben separarse por comas.
Los selectores de hijos identifican a un elemento cuando es hijo de otro elemento.
El signo ">" se utiliza para combinar los selectores
y puede dejarse o no espacio alrededor del mismo:
DIV>P {color: blue}
DIV > P {color: blue}
El ejemplo anterior selecciona los párrafos que son hijos de un elemento DIV. Todas las consideraciones hechas para los selectores de descendientes se aplican en este caso
La pseudo-clase :first-child selecciona un elemento que es el primer hijo de otro elemento. Por ejemplo, si queremos que un párrafo no tenga sangría cuando sea el primer hijo de un DIV:
DIV > p:first-child {text-indent: 0}
Entre P y :first-child no debe haber espacio,
pero entre DIV y > y P pueden o no
quedar espacios intermedios.
Si queremos seleccionar un elemento cuando sea el primer hijo de cualquier elemento, podemos usar el selector universal:
* > h1:first-child {color: blue} /* usando el asterisco */
h1:first-child {color: blue} /* o bien podemos obviar el asterisco */
Los selectores de hermanos adyacentes tienen una sintaxis similar a los anteriores, usando como operador el signo más (+).
h1 + p {text-indent: 0}
h1 + h2 {margin-top: -0.5em}
En el primer caso, se selecciona los párrafos p que sigan inmediatamente a un título h1 y se les quita la sangría. En el segundo, cuando a un título nivel 1 h1 le sigue uno de nivel 2 h1, a este último se le adjudica un margen superior negativo para evitar que se separen demasiado entre sí.
Por hermanos adyacentes se entiende aquellos elementos que comparten un mismo padre y que se encuentran uno a continuación del otro en la estructura del documento. El elemento que se selecciona es el que se especifica en segundo lugar.