Organizar o texto e o conteúdo de um site com código HTML é apenas uma ‘parte’ da construção do front-end de um site. Outra grande parte desse processo é a criação do estilo visual, que é regido pelas regras do CSS. Sempre que construímos um novo site ou fazemos grandes alterações no layout de um já existente, inevitavelmente queremos que partes específicas de nosso site tenham uma determinada aparência. Para fazer isso, é importante entender como usar os vários Combinadores CSS, como o seletor descendente de CSS. Este combinador CSS permite que grandes seções de um site recebam as mesmas alterações de estilo de uma só vez.
O que é um seletor descendente CSS?
O seletor descendente de CSS é um dos quatro combinadores CSS diferentes. Ao adicionar um único espaço () entre dois seletores, os mesmos elementos de estilo também se aplicam ao segundo seletor, visto que os descendentes compartilham o mesmo primeiro seletor. Para entender um seletor descendente de CSS, primeiro você precisa entender os seletores de CSS. A melhor maneira de descrever um seletor é que ele é um operador CSS que identifica a parte do HTML que você está tentando estilizar. É chamado de seletor porque “seleciona” qualquer bit de HTML que compartilhe o mesmo operador do CSS pai. Exemplos comuns de tais operadores são: div
Esta é uma tag que define uma seção de HTML, que pode incluir itens como parágrafos e conteúdo, ou: li
que é uma lista ordenada. Outra tag semelhante é: ul
Isso cria uma lista não ordenada. Padrões mais complexos também são chamados de seletores. Simplificando, um seletor descendente de CSS diz a um site como deve ser quando um seletor está ‘aninhado’ sob um ancestral comum. O primeiro seletor se torna o pai CSS, ou o seletor ‘ancestral’, e o segundo seletor se torna o descendente. Pense em como um diretório de arquivo funciona: o CSS pai é como uma pasta que contém outras pastas, que podem conter suas próprias pastas. Dos quatro combinadores, o único que seleciona tudo o que está aninhado sob um pai CSS específico é o seletor descendente de CSS. Existem três outros combinadores
- O seletor filho (‘>’ em vez de um espaço único) seleciona apenas os elementos referidos pelo primeiro seletor em um combinador. Se o primeiro seletor for (div) e o segundo seletor for (p), apenas (p) será selecionado, desde que tenha (div) como ancestral. Se um parágrafo for criado em uma nova (seção), mesmo que esteja no mesmo (div), as regras de estilo não são mantidas.
- O seletor irmão adjacente (‘+’ em vez de espaço único) seleciona apenas o elemento que está mais próximo do segundo seletor no combinador. Se o primeiro seletor for (div) e o segundo seletor for (p), o primeiro elemento que usa (p), mas não (div) é selecionado.
- O seletor irmão geral (‘~’ em vez de um único espaço) seleciona todos os elementos, exceto aqueles referidos pelo segundo seletor. Se o primeiro seletor for (div) e o segundo seletor for (p), cada elemento que não for (p) será selecionado.
Qual é a aparência de um seletor de descendente CSS?
No exemplo a seguir de dois seletores descendentes CSS diferentes operando lado a lado, (div) é o primeiro seletor no primeiro combinador, enquanto (ul) é o primeiro seletor no segundo combinador. Em ambos os seletores descendentes de CSS, (p) é usado como o segundo seletor.
Os elementos de estilo diferem entre (div) e (ul), mas (p) carrega claramente as características de seu CSS pai em ambos os casos.
Por que usar um seletor descendente CSS?
Para entender a importância do seletor descendente de CSS, é importante primeiro entender os seletores aninhados de CSS. Em geral, queremos que certas regras de estilo se apliquem a todo o site, como o tamanho ou a fonte específica que todo texto de parágrafo (p) usa por padrão. Da mesma forma, o HTML pode começar a parecer confuso se essas regras de estilo forem aplicadas a cada parágrafo individual, e não a todo o site. CSS aninhado é possível por meio do uso de combinadores de CSS, como o seletor descendente de CSS. Ao “aninhar” o CSS sob um seletor pai, é possível dizer de forma rápida e eficiente a um site como um seletor específico deve se parecer em cada cenário ao qual o CSS pai é referido. Usar um seletor CSS aninhado nos permite aplicar as mesmas regras para estilizar várias seções de um site ao mesmo tempo, permitindo-nos trabalhar com menos trabalho, ao mesmo tempo que mantemos nosso HTML limpo e puro.
