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&apos;s get started</span></p> 

Saída

tutoriais java

Explicação:

1. Duas tags div compõem o bloco body no código acima.
2. Existem muitas tags de parágrafo

   com várias tags snap dentro do primeiro elemento div.

3. Uma tag de cabeçalho e uma tag de parágrafo

   com uma tag snap estão incluídos na outra tag div.

4. 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.
5. 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, podemos aplicar o primeiro filho do CSS. Como resultado, se aplicarmos estilo à tag de linha usando o primeiro seletor filho, apenas a tag da primeira linha será estilizada e o restante da tag de linha não será estilizado. O primeiro filho terá como alvo o elemento da primeira linha na tag pai e o restante será ignorado.

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 rowem CSS.

 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:

1. O bloco de corpo do código acima contém tags de tabela para as informações do aluno.
2. Existem várias linhas de tagsdentro 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.
3. Para estilizar a tag de linhadentro 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:

1. Em CSS, o seletor do primeiro filho (:first-child) nos permite aplicar imediatamente o estilo do primeiro elemento ao outro elemento.
2. O primeiro filho estiliza o material com base em como ele se relaciona com o conteúdo de seus pais e irmãos.
3. 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.