CSS se aplicam a todas as crianças

Podemos selecionar todos os filhos de um determinado pai e depois aplicar o estilo a todas as crianças do CSS. Temos um seletor infantil em CSS para Select e aplicar estilo a todas as crianças. O seletor infantil também é conhecido como seletor de "elemento> elemento". Qualquer elemento presente dentro da classe pai é selecionado como um filho desse pai. Podemos mudar o estilo de todas as crianças usando as propriedades CSS.

Neste guia, aprenderemos a aplicar estilo a todas as crianças do CSS e usaremos alguns exemplos para entender esse conceito em detalhes.

Sintaxe:

elemento> elemento

Ele selecionará todos os filhos de um pai em particular.

div. classe> *
// Propriedades do CSS

Ele selecionará as crianças recursivamente.

Exemplo #1: Selecionando todas as crianças

Primeiro, criamos o arquivo html. Em seguida, criamos algumas classes "div" e "span" e escrevemos alguns parágrafos dentro dessas aulas. Usamos o seletor de crianças no CSS e adicionamos algum estilo para selecionar e aplicar esse estilo a todas as crianças. Neste guia, usamos o código do Visual Studio para a demonstração desses exemplos. Criamos este arquivo HTML neste software e digitamos o código HTML. Você tem que digitar o seguinte código. O ".A extensão do arquivo html ”é usada para salvar este arquivo.

Aqui, temos uma tag "". Nesta tag "", temos dois parágrafos usando o "

”. Então, vem uma tag "". Temos um parágrafo dentro desta tag. Após a tag de fechamento de "", também temos dois outros parágrafos onde fechamos a tag "". Fora desta tag "div", escrevemos mais um parágrafo. Esses parágrafos ajudarão você a entender o conceito de selecionar e aplicar todos os elementos no CSS.

Código CSS:

O código CSS é refletido na imagem a seguir. Vinculamos este arquivo CSS ao nosso arquivo html. Todo o estilo que fizemos aqui é aplicado ao arquivo html que criamos.

Aqui, usamos o "div> p", que seleciona todos os parágrafos que estão presentes dentro do "div". Nos aparelhos encaracolados, usamos as propriedades de estilo como "cor de fundo", que é usada para mudar a cor de fundo de todos os filhos daquele pai "div". Nós o definimos como "azul claro". Este fundo azul claro se aplicará a todas as crianças. Mudamos a “família de fontes” de todas as crianças usando a propriedade CSS e a definimos como “argelino”. Esta propriedade se aplicará a todas as crianças. Além disso, usamos a propriedade CSS "Alinhamento de texto" e alinhamos o texto das crianças ao "centro".

Saída:

Você pode facilmente obter a saída pressionando "Alt+B". Ele renderiza sua saída no navegador. Você pode ver facilmente a diferença como ele seleciona todas as crianças e aplica o estilo a essas crianças.

Aqui, vemos que ele seleciona os dois primeiros parágrafos, bem como o quarto e o quinto parágrafos e aplica o estilo a esses parágrafos. Não muda o estilo dos terceiros e sextos parágrafos, pois eles não são filhos do pai “div”. O terceiro parágrafo está escrito no "span", é por isso que não é o filho de "div". O sexto parágrafo está escrito fora da “div”, para que o estilo não seja aplicado a este parágrafo. O seletor de crianças seleciona apenas o filho do pai mencionado no código CSS.

Exemplo #2: Selecionar todas as crianças recursivamente

Para este exemplo, se o código HTML for o mesmo do código anterior, definimos o nome da classe DIV como "AllChild" e usamos esse nome no código CSS. Mudamos o código CSS e selecionamos o filho do pai, recursivamente.

Neste exemplo, mudamos a cor do “fundo” dos filhos do elemento da classe Div. Aqui, o “div.Allchilld> *"seleciona todos os elementos da classe DIV como um filho desse" div ". O "*" seleciona todos os filhos da classe "div" chamada "AllChild". Muda a cor de todas as crianças da classe div para "rosa"

Saída:

Aqui está a saída onde usamos o “div.AllChild> *"Seletor. Ele seleciona todos os filhos dos pais, recursivamente. Você pode ver que muda a cor de fundo de todos os elementos da classe DIV para uma cor "rosa".

Exemplo #3: Selecionando todas as crianças no CSS

Neste código, usamos o "" e . No "", temos três "" e o parágrafo "

”Dentro deste parágrafo. Usamos o "" novamente e depois fechamos este parágrafo usando "

”. Fechamos o "div" e criamos outro período que está presente fora do "div".

Código CSS:

A "exibição" do "span" está definida como "bloqueio". Usamos o seletor infantil que seleciona todos os filhos dos pais. É usado aqui para selecionar todos os vãos da classe div, já que "span" é o filho do pai "div". Ele seleciona todos os elementos de extensão da div e depois aplica o estilo a todos os vãos. A cor de fundo de todos os vãos é definida como "verde claro". O "tamanho da fonte" de todos os "vãos" está definido como "35px". A “família da fonte” para tudo isso é “Gill Sans”. O "peso da fonte" está definido como "ousado" e o "estilo" está definido como "itálico". Isso se aplica a todas as crianças.

Saída:

Aplica o estilo a todas as crianças "abrange" do pai "div". Como o parágrafo 1, 2 e 4 é escrito dentro da "extensão" no "div", o estilo desses três parágrafos muda. Isso significa que o seletor infantil seleciona a extensão da div e aplica o estilo anterior a todas essas crianças.

Exemplo #4: Selecionar todas as crianças recursivamente

Criamos a "classe div" com o nome "criança". Temos dois vãos, e depois um parágrafo, e novamente um espaço dentro da div. Um parágrafo está escrito fora da div. Agora, selecionamos os elementos da classe DIV recursivamente usando o seletor CSS.

Código CSS:

O span "exibição" é "bloco". Então, temos o “div.Criança> *”Seletor que seleciona todos os elementos da classe DIV denominada“ criança ”usando o“ *”. O "*" seleciona todos os elementos infantis. A “cor de fundo” aqui para todas as crianças é “salmão leve”. A cor da fonte é "azul-violeta". A família da fonte que usamos aqui é “Times New Roman”. Também usamos o "peso da fonte" e o definimos como "mais ousado". O "tamanho da fonte" que usamos é "25px". Agora, verifique a aparência da saída.

Os quatro primeiros parágrafos são escritos dentro da classe Div “Child” e todo o estilo que usamos no exemplo anterior do código CSS é aplicado aqui, conforme mostrado na imagem. Ele seleciona todos os elementos infantis da classe “criança” de “div” e aplica os estilos a esses elementos.

Conclusão

Usamos o seletor de crianças neste guia e explicamos como selecionar todas as crianças no CSS. Também explicamos como aplicar os estilos a todos os filhos do pai selecionado. Aprendemos a selecionar todos os filhos de um pai selecionado e selecionar todas as crianças recursivamente usando o seletor de crianças CSS. Neste guia, exploramos quatro exemplos diferentes. Realizamos todos os exemplos e exibimos esses códigos e saídas neste guia. Esperamos que você aprenda esse conceito depois de ler cuidadosamente este guia e depois de realizar esses exemplos por conta própria.