El "selector de hermano adyacente" permite seleccionar un elemento HTML que viene inmediatamente después de otro elemento HTML. Los dos elementos deben tener el mismo elemento padre. Por ejemplo:
<body> <h1>Titulo 1</h1> <p>Esto es el primer párrafo.</p> <p>Esto es el segundo párrafo.</p> <p>Esto es el tercer párrafo.</p> </body>
Mediante la regla de estilo:
h1+p{
color:#f00;
}
Seleccionamos el primer párrafo que le sigue al elemento h1. Luego el primer párrafo se pinta de rojo.
Si aplicamos este otro estilo al mismo bloque HTML:
p+p{
color:#f00;
}
Se pintan de rojo el segundo y tercer párrafo ya que a cada uno de estos párrafos le antecede otro párrafo (no se pinta el primer párrafo porque no le antecede un párrafo sino un "h1")
Ahora el "selector de hermano general" permite seleccionar todos los hermanos a diferencia del selector de hermano adyacente que selecciona el primero.
Si tenemos el siguiente fragmento:
<body> <h1>Titulo 1</h1> <p>Esto es el primer párrafo.</p> <p>Esto es el segundo párrafo.</p> <p>Esto es el tercer párrafo.</p> </body>
Y le aplicamos la regla:
h1~p{
color:#f00;
}
Como resultado se aplica el color rojo a todos los párrafos adyacentes que tienen como hermano el elemento "h1".
Una página completa que muestra el empleo de estos dos selectores:
<!DOCTYPE html> <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <h1>Titulo 1</h1> <p>Esto es el primer párrafo.</p> <p>Esto es el segundo párrafo.</p> <p>Esto es el tercer párrafo.</p> <h2>Titulo 2</h2> <p>Esto es el primer párrafo.</p> <p>Esto es el segundo párrafo.</p> <p>Esto es el tercer párrafo.</p> </body> </body> </html>
estilos.css
h1+p{
color:#f00;
}
h2~p{
color:#f00;
}