Seletor de Irmão Adjacente

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

O seletor de irmão adjacente (+) é usado para estilizar um elemento que vem logo após um elemento específico. Ambos devem ter o mesmo pai, e "adjacente" significa "imediatamente ao lado um do outro".

Por exemplo:

<h2>Heading</h2>
<p>This paragraph is styled</p>

Com este CSS:

h2 + p {
  font-weight: bold;
}

O parágrafo está estilizado porque segue diretamente um elemento h2.

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 um seletor CSS que selecione apenas os parágrafos (<p>) que seguem diretamente um elemento <h2> descrevendo um jogo de basquete. Estilize esses parágrafos com uma cor de fonte blue e tamanho de fonte 18px.

Folha de consulta

O seletor de irmão adjacente (+) estiliza um elemento que vem imediatamente após um elemento específico. Ambos os elementos devem ter o mesmo pai.

Sintaxe:

element1 + element2 {
  /* estilos */
}

Exemplo:

h2 + p {
  font-weight: bold;
}

Isso seleciona parágrafos que seguem diretamente um elemento h2.

Experimente você mesmo

<html>
<head>
    <title>Adjacent Sibling Selector</title>
    <style>
        /* CSS solution goes here */
        
    </style>
</head>
<body>
    <h2>Basketball Game Overview</h2>
    <p>The basketball game was an exciting match between the **Los Angeles Lakers** and the **Golden State Warriors**, featuring intense offense and solid defense from both teams.</p>
    
    <p>During the first half, the Lakers held a slight lead, with LeBron James making key plays, while Stephen Curry of the Warriors kept the game tight with impressive three-pointers.</p>
    
    <p>This paragraph is not directly after an h2, so it should not be affected.</p>
    
    <p>In the second half, the Warriors fought back, with Klay Thompson hitting critical shots, but the Lakers secured their win with solid defense and a game-winning dunk by Anthony Davis.</p>
</body>
</html>

Teste seus conhecimentos

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