”. Nesses casos, o “ :tem() ” a pseudoclasse do seletor pai é usada.
Este post irá descrever:
- Como estilizar um elemento pai especificando seus elementos filho?
- Como selecionar todos os elementos filhos?
- Como selecionar todos os elementos filhos diretos?
Como estilizar um elemento pai especificando seus elementos filho?
Primeiro, crie um arquivo HTML com dois elementos “div” da seguinte forma:
- Adicione dois “ ” elementos com a mesma classe “ pai-div ”.
- O primeiro contém dois “ ” elementos.
- O segundo elemento “
” contém “ ' e ' ”: < div classe = 'div-pai' >
< p > Olá < / p >
< p > mundo < / p >
< / div >
< div classe = 'div-pai' >
< h1 > Oi < / h1 >
< p > Eu tenho a tag 'h1' < / p >
< / div >Se for necessário estilizar o elemento “
” com a extensão “ ” elemento, então podemos ajustar o estilo do elemento pai segurando o filho. Para isso, podemos utilizar o “ :tem() ” seletor.
De ambos os elementos “
”, selecione aquele que contém o elemento “” usando “ .class-name:has(child-name) ”:
.parent-div : tem ( h1 ) {
cor de fundo : #103e6d ;
cor : Concha do mar ;
largura : 150px ;
altura : 150px ;
raio da borda : cinquenta% ;
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.
- “ raio da borda ” é 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 pai, siga o exemplo fornecido.
Exemplo
Implemente as seguintes etapas para criar uma página HTML:
- Adicione um elemento div que contém dois “ ” tags e um “ ” tag com a classe “ criança-div ”.
- A criança “ div ” contém um elemento “
< div classe = 'div-pai' >”:
< p > Olá < / p >
< p > mundo < / p >
< div classe = 'criança-div' >
< p > eu sou criança div < / p >
< / div >
< / div >Podemos selecionar elementos filho através do pai “
' classe. Isso não apenas selecionará seu “ p ” mas também seleciona os elementos “ p ” elementos: .parent-div p {
cor de fundo : #7F167F ;
família de fontes : cursiva ;
tamanho da fonte : 25px ;
alinhamento de texto : Centro ;
cor : fumaça branca ;
}Saída
Como selecionar todos os elementos filhos diretos?
Para selecionar o filho direto do div pai, podemos usar o “ > ” símbolo. Isso ajudará a selecionar todos os elementos “p” que são filhos diretos do pai “
”. Por exemplo, aplicamos as seguintes propriedades CSS: .parent-div > p {
cor de fundo : #7F167F ;
família de fontes : cursiva ;
tamanho da fonte : 30px ;
alinhamento de texto : Centro ;
cor : fumaça branca ;
}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 seletores pais CSS em HTML e CSS.
Conclusão
Em CSS, o “ :tem() ” é utilizado como uma pseudoclasse de seletor pai. É particularmente usado para selecionar elementos pais. Por exemplo, ' .parent-div:has(h1) ” seleciona o elemento pai com o “ ” elementos. Para selecionar o elemento filho do elemento pai, utilize “ .parent-div p ”. A declaração de condição também pode ser usada para selecionar todos os elementos filhos diretos. Este artigo explicou o seletor pai CSS com exemplos.
- A criança “ div ” contém um elemento “