Selectores de hermanos adyacentes

Usaremos la siguiente Hoja de Estilo para la página:

H1 {color: red}
H2 {color: blue}
P {color: black; text-indent: 2em}
H1 + P {color: maroon; text-indent: 0}
H1 + H2 {color: green; margin-top: -0.5em}

para aplicarla a este código:

El título (H1) en rojo

Un párrafo que es hermano adyacente de H1, por lo tanto no tiene sangría y el color del texto es marrón..

A este párrafo se le aplica el estilo normal, es decir, texto en negro y una sangría de 2em. Esto es así porque aunque es un elemento hermano de H1 (BODY es el padre de ambos) no son adyacentes.

Un subtítulo (H2) de color azul

Otro párrafo normal. A continuación usaremos un título (H1) e inmediatamente un subtítulo (H2). Como H2 será hermano adyacente de H1 cambiará su color a verde y reducirá su margen superior a -0.5em.

Otro título (H1)

Subtítulo (H2) de color verde y margen negativo

Otro párrafo de relleno.

Otro párrafo de relleno.

Otro párrafo de relleno.