Selecione todos os elementos infantis recursivamente no CSS

O método comumente usado para selecionar os elementos HTML no CSS é adicionar o ID ou o seletor de classe do elemento específico e, em seguida, aplicar as propriedades CSS no elemento. Mas, se houver necessidade de selecionar diferentes tipos de elementos filhos associados a um elemento de pai solteiro. Por exemplo, um elemento de span, um elemento de parágrafo ou um elemento de cabeçalho como filho de um único elemento div, o “*”O símbolo seguido pelo seletor é usado no elemento de estilo CSS.

Este artigo demonstrará o método para selecionar todos os elementos infantis praticamente.

Como selecionar todos os elementos filhos recursivamente?

Para selecionar os elementos filhos, o desenvolvedor precisa adicionar o seletor de identificação ou classe do elemento pai com o “*”Símbolo no final do elemento de estilo CSS e depois adicione as propriedades dentro dele.

Exemplo

Vamos adicionar um exemplo simples para entender a explicação acima:

Parágrafo 1

> Parágrafo # 2

Parágrafo # 3

> Parágrafo # 4

No trecho de código adicionado acima:

• • A "”O elemento é adicionado com uma classe declarada como“minha classe”.
  • Dentro de "”Elemento, quatro subelementos são definidos usando“

    ","","

    ", e "”Tags com o texto“Parágrafo 1","Parágrafo # 2","Parágrafo # 3", e "Parágrafo # 4”, Respectivamente.

  • Depois do fechamento “”Tag, três“”Os elementos são adicionados que não estão associados ao acima“" elemento. Eles são adicionados apenas para diferenciar os que são os elementos infantis associados à divisão dos pais e os que são elementos independentes.

Agora, a fim de selecionar todos os elementos filhos da div, o “*”Símbolo com o nome do ID ou classe pai ou classe pode ser usado:

.minha classe *
cor de fundo: póblue;
exibição: bloco;
Alinhamento de texto: centro;

No trecho de código acima:

• • O "*”O símbolo é adicionado seguido pelo“.minha classe”Seletor que é o elemento pai contendo quatro elementos diferentes dentro dele como seus elementos filhos.
  • Dentro dele, o “cor de fundo”A propriedade foi definida como“Pó azul”. Esta propriedade adiciona a cor de fundo aos elementos da criança.
  • ““Exibir: Bloco" e "Alinhamento de texto: centro”As propriedades foram definidas para alinhar os elementos filhos ao centro da interface.

O exemplo acima de adição aplicará as propriedades CSS aos elementos filhos do elemento pai associado à classe “minha classe”. Essas propriedades não serão aplicadas a outros elementos que não são os elementos infantis da Div associados à classe "MyClass":

Isso se trata de selecionar todos os elementos infantis recursivamente no CSS.

Conclusão

Para selecionar todos os elementos filhos de um determinado elemento pai, é necessário adicionar o “*”Símbolo após o ID ou seletor de classe do elemento pai no elemento de estilo CSS. As propriedades do CSS adicionadas no interior serão implementadas em todos os elementos infantis. Este artigo forneceu um guia completo para o método para selecionar todos os elementos filhos do CSS.