Seletores irmãos

dabblet.css

/**
 * Seletores irmãos em CSS
 */

h1:hover + h2{
  color:red;
} /* funciona */

h1:hover ~ h2{
    font-size:14px;
} /* funciona */

h2 + h1{
	margin-top: 100px;
}  /* funcionaria para um h1 que viesse depois de h2 */

h2:hover + h1{
	color:blue;
} /* não funciona como esperado */ 


h2 ~ h1{
	font-style: italic
} /* funcionaria para um h1 que viesse depois de h2 */

h2:hover ~ h1{
    font-size:14px;
} /* não funciona como esperado */

dabblet.html

<!-- Elementos irmãos -->

<h1>Primeiro irmão </h1>
<h2>Segundo irmão </h2>