Os seletores no CSS são as regras que têm o padrão de elementos. Com base nesses padrões, os elementos são selecionados pelo navegador e ajustados em estilos. Em alguns casos, é necessário estilizar os elementos com um elemento pai específico. Por exemplo, se houver vários elementos “” atribuídos com a mesma classe e é necessário para estilizar o “div” com o “

" marcação. Nesses casos, o “:tem()”Pseudo-classe de seletor de pais é usado.

Este post descreverá:

• Como estilizar um elemento pai especificando seus elementos filhos?
• Como selecionar todos os elementos filhos?
• Como selecionar todos os elementos diretos de crianças?

Como estilizar um elemento pai especificando seus elementos filhos?

Primeiro, crie um arquivo HTML com dois elementos "div" da seguinte forma:

• Adicionar dois “”Elementos com a mesma classe“Pai-Div”.
• O primeiro contém dois “

  ”Elementos.

• O segundo elemento “” contém “

  " e "

  ”:

Olá

mundo

Oi

Eu tenho tag "h1"

Se for necessário para estilizar o elemento "" com o "

”Elemento, então podemos ajustar o estilo do elemento pai segurando a criança. Para esse fim, podemos utilizar o “:tem()”Seletor.

Dos dois elementos ", selecione o que contém o"

”Elemento usando“.Nome de classe: tem (nome da criança)”:

.Pai-Div: Has (H1)
Background-Color: #103E6D;
Cor: conchas;
Largura: 150px;
Altura: 150px;
Radio de fronteira: 50%;
Alinhamento de texto: centro;

Aqui, aplicamos as seguintes propriedades CSS no elemento pai:

• ““cor de fundo”É usado para especificar a cor de fundo do elemento.
• ““cor”Especifica a cor do texto do elemento.
• ““largura”É usado para definir a largura do elemento.
• ““altura”Especifica a altura do elemento.
• ““Radio de fronteira”A propriedade é usada para definir os cantos arredondados do elemento.
• ““alinhamento de texto”Especifica o alinhamento do texto.

Saída

Como selecionar todos os elementos filhos?

Para selecionar o elemento filho com a ajuda do seletor de pais, passe pelo exemplo dado.

Exemplo

Implemente as etapas a seguir para criar uma página HTML:

• Adicione um elemento div que contém dois “

  ”Tags e um“”Tag tendo a classe“criança-div”.

• A criança “div”O elemento contém um“

  " elemento:

Olá

mundo

Eu sou criança div

Podemos selecionar elementos filhos através do pai “" aula. Isso não apenas selecionará seu direto "p”Elementos, mas também seleciona o aninhado“p”Elementos:

.Pai-Div P
Background-Color: #7F167F;
Fonte-família: cursiva;
Size da fonte: 25px;
Alinhamento de texto: centro;
Cor: Whitesmoke;

Saída

Como selecionar todos os elementos diretos de crianças?

Para selecionar o filho direto do pai Div, podemos usar o “>”Símbolo. Isso ajudará a selecionar todos os elementos "P" que são o filho direto do pai "”. Por exemplo, aplicamos as seguintes propriedades CSS:

.Pai-Div> P
Background-Color: #7F167F;
Fonte-família: cursiva;
tamanho da fonte: 30px;
Alinhamento de texto: centro;
Cor: Whitesmoke;

O "família de fontes”Especifica a fonte do elemento selecionado e“tamanho da fonte”É usado para definir o tamanho da fonte:

Saída

Discutimos sobre os seletores de pais CSS em HTML e CSS.

Conclusão

No CSS, o “:tem()”O seletor é utilizado como um seletor de pais pseudo-classe. É particularmente usado para selecionar elementos dos pais. Por exemplo, ".Pai-Div: tem (H1)”Seleciona o elemento pai com o“

”Elementos. Para selecionar o elemento filho do elemento pai, utilize “.pai-div”. A declaração de condição também pode ser usada para selecionar todos os elementos filhos diretos. Este artigo explicou o seletor de pais do CSS com exemplos.