Seletor adjacente em CSS

O seletor adjacente + permite selecionar um elemento baseado no seu vizinho imediatamente anterior.

Sintaxe

seletor1 + seletor2 {
	
}

Vamos direcionar todas as tags p que estão imediatamente após as tags h2 e colori-las de vermelho:

<h2>texto</h2>
<p>
	+
</p>
<p>
	-
</p>
<p>
	-
</p>

h2 + p {
	color: red;
}

Vamos direcionar todas as tags p que estão imediatamente após os elementos com a classe .test e colori-las de vermelho:

<p class="test">
	texto
</p>
<p>
	+
</p>
<p>
	-
</p>

.test + p {
	color: red;
}

Vamos direcionar todos os elementos com a classe .elem que estão imediatamente após os elementos com a classe .test e colorí-los de vermelho:

<p class="test">
	texto
</p>
<p class="elem">
	+
</p>
<p>
	-
</p>

.test + .elem {
	color: red;
}

Seletor filho,
que permite selecionar elementos por aninhamento direto
Seletor descendente,
que permite selecionar um elemento baseado no seu elemento pai
Seletor geral de irmãos,
que permite selecionar elementos após um elemento especificado
Seletor universal,
que permite selecionar todos os elementos