O primeiro filho, um seletor CSS (first-child), nos permite aplicar o estilo do primeiro elemento diretamente ao outro elemento. De acordo com a especificação CSS Selectors Level 3, ela é chamada de pseudoclasse estrutural, pois baseia o estilo de qualquer conteúdo em como ele se relaciona com seu conteúdo pai e irmão.
Sintaxe
:first-child { //property } Exemplo
h1:first-child { color: blue; } <p> <span>Let's get started</span></p> Saída
tutoriais java
Explicação:
- Duas tags div compõem o bloco body no código acima.
- Existem muitas tags de parágrafo
com várias tags snap dentro do primeiro elemento div.
- Uma tag de cabeçalho e uma tag de parágrafo
com uma tag snap estão incluídos na outra tag div.
- Aplicamos CSS interno ou incorporado dentro do bloco head e estilizamos a tag snap dentro da tag de parágrafo. No entanto, não somos obrigados a criar uma classe para a tag snap; em vez disso, podemos usar o primeiro seletor filho (p:first-child) para identificar instantaneamente o primeiro elemento da tag snap dentro da primeira tag div. Podemos dar algum estilo ao elemento inicial (snap). Existem duas tags snap no parágrafo, mas como podemos ver, apenas a primeira tag é estilizada e as outras foram ignoradas.
- Podemos ver como o primeiro filho procurou a primeira tag snap e estilizou-a na segunda tag div. O elemento deve ser o primeiro elemento entre seus irmãos dentro da tag pai a ser direcionado pelo primeiro filho; caso contrário, não será escolhido.
Usando oMarca de linha
Usando a tag de linha
Sintaxe
tr:first-child{ //CSS declarations with style properties; } Exemplo
Para uma melhor compreensão, vejamos um exemplo do primeiro CSS filho usando a tag row
Example of First Child in CSS using row tag tr:first-child { font-size: 40pixels; color: black; background-color: lightblue; } <table class="table"> <tr> <th>Name</th> <th>ID</th> <th>Branch</th> </tr> <tr> <th>Priya</th> <th>123</th> <th>CSE</th> </tr> <tr> <th>John</th> <th>435</th> <th>ECE</th> </tr> <tr> <th>David</th> <th>544</th> <th>MECH</th> </tr> <tr> <th>Sushma</th> <th>765</th> <th>CIVIL</th> </tr> </table> Saída
Explicação:
- O bloco de corpo do código acima contém tags de tabela para as informações do aluno
.
- Existem várias linhas de tags
dentro da tag da tabela , e a tag da primeira linha tem cabeçalhos como o número da matrícula, o nome e as notas do aluno. Os dados do aluno estão contidos nas tags de linha restantes.
- Para estilizar a tag de linha
dentro da tag da tabela , aplicamos CSS interno ou incorporado dentro do bloco head. Entretanto, não somos obrigados a criar uma classe para a tag row; em vez disso, estamos simplesmente usando o primeiro seletor filho (p:first-child), que reconhecerá automaticamente o elemento da tag da primeira linha dentro da tag da tabela. Podemos estilizar a tag row, que é o primeiro elemento. Existem várias linhas de tags dentro da tabela. Porém, como podemos ver, a primeira tag é estilizada enquanto as demais são desconsideradas.
Conclusão
Aprendemos sobre o primeiro filho do CSS neste artigo. Aqui está uma conclusão do primeiro filho do artigo:
- Em CSS, o seletor do primeiro filho (:first-child) nos permite aplicar imediatamente o estilo do primeiro elemento ao outro elemento.
- O primeiro filho estiliza o material com base em como ele se relaciona com o conteúdo de seus pais e irmãos.
- Uma pseudoclasse que é membro das classes baseadas em posição e baseada em estrutura é o primeiro filho. Sem verificar se há mais irmãos (elementos) do mesmo tipo, a primeira classe tentará combinar com o primeiro filho imediato do pai.