Esse seletor +
em CSS é chamado de Adjacent sibling selector.
O sinal de +
(Adjacent Selector) no css
CSS me lembra muito o método siblings
do jQuery, que tem a finalidade de pegar um elemento irmão. No caso do css
CSS, representa um elemento subsequente (próximo) ao indicado anteriormente.
É útil, por exemplo, se você quer indicar que um input
, quando estiver precedido por um label
, tenha uma formatação diferente.
Veja o exemplo:
.teste-a{
background:red;
color:white;
}
label+.teste-a{
background:blue !important;
}
<input class="teste-a">
<label>teste b</label>
<input class="teste-a">
Referências: