03 seletores CSS poderosos que você deve dominar

Metade do segredo para ser eficiente com CSS é saber quando você deve usar cada seletor.

Hoje, vamos analisar 03 seletores poderosos que ajudam a direcionar exatamente os elementos que você deseja estilizar.

~ Sibling selector

O seletor ~ permite selecionar todos os elementos irmãos que vêm depois de um elemento específico, independentemente da sua posição ou proximidade no HTML. Ou seja, ele aplica os estilos a todos os elementos irmãos correspondentes que aparecem depois do elemento selecionado.

h2 ~ p {
  /* Todo elemento <p> que vem após o <h2> */	
}

+ Adjacent sibling selector

O seletor + seleciona apenas o elemento irmão imediatamente após o elemento escolhido. Ele aplica o estilo somente ao primeiro irmão que vem logo em seguida, sem considerar outros elementos irmãos mais distantes.

h2 + p {
  /* Primeiro elemento <p> imediatamente após o <h2> */
}

> Child selector

O seletor > seleciona apenas os elementos que são filhos diretos do elemento indicado. Ele ignora elementos que estejam mais profundamente aninhados na hierarquia do HTML, focando apenas nos filhos imediatos.

ul > li {
  /* Elementos <li> que são filhos diretos de <ul> */
}

Dominar esses seletores permite que você escreva CSS mais eficiente e específico, facilitando o controle da estilização dos seus apps.