Como entender o seletor de irmãos comum CSS

1. Os seletores irmãos comuns CSS referem-se a todos os elementos conectados a outro elemento, ambos com o mesmo elemento pai.

2. O seletor de irmãos comuns usa o til (~) como símbolo de combinação para irmãos comuns.

Exemplo

.ancestral {

largura: 500px;

altura: 300px;

}

.pai {

largura: 300px;

altura: 200px;

}

.criança {

largura: 200px;

altura: 100px;

}

/* Posiciona o elemento cujo irmão é div depois de .child1*/

.child1 ~ div {

cor de fundo: lightcoral;

}

O que foi dito acima é a compreensão do seletor de irmãos comum CSS, espero que seja útil para todos.

Mais guia de aprendizagem de CSS: tutorial de CSS