Selecionando o primeiro filho

Parte da seção CSS Mastery do Journey de HTML da Coddy — lição 13 de 43.

A pseudo-classe :first-child seleciona o primeiro elemento entre um grupo de elementos irmãos.

Por exemplo:

<section>
  <p>This paragraph will be blue and bold.</p>
  <p>This paragraph will have default styling.</p>
</section>

Qualquer parágrafo que seja o primeiro elemento filho dentro de seu pai será colorido de azul e terá texto em negrito.

p:first-child {
  color: blue;
  font-weight: bold;
}

Você pode combinar e aplicar seletores descendentes, filhos e outros para segmentar elementos de forma mais específica. Aqui está outro exemplo:

div:first-child h1 {
 color: red;
}

Isso seleciona o primeiro elemento div entre seus irmãos e, em seguida, altera a cor do texto da tag <h1> dentro dele para vermelho.

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Desafio

Fácil

Crie uma regra CSS que selecione o primeiro item da lista (<li>) em qualquer lista não ordenada (<ul>) e o estilize com:

Cor de texto blue
Uma cor de fundo light yellow
Um padding à esquerda de 10 pixels

Folha de consulta

A pseudo-classe :first-child seleciona o primeiro elemento entre um grupo de elementos irmãos.

p:first-child {
  color: blue;
  font-weight: bold;
}

Você pode combinar :first-child com outros seletores para uma seleção mais específica:

div:first-child h1 {
  color: red;
}

Isso seleciona o primeiro elemento div entre seus irmãos e, em seguida, seleciona a tag h1 dentro dele.

Experimente você mesmo

<!DOCTYPE html>
<html>
<head>
    <title>Targeting the First Child</title>
  <style>
    /* Write your CSS rule here */
    
  </style>
</head>
<body>
  <h2>Grocery List</h2>
  <ul>
    <li>Fresh Apples</li>
    <li>Organic Bananas</li>
    <li>Whole Wheat Bread</li>
  </ul>
  
  <h2>To-Do List for the Day</h2>
  <ul>
    <li>Complete coding challenge</li>
    <li>Go for a walk in the park</li>
  </ul>
</body>
</html>

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.