Seletor de irmão adjacente

Lição 9 de 15 do curso Seletores CSS da Coddy.

Vamos mergulhar nos seletores de irmãos adjacentes. Esses seletores visam elementos que compartilham o mesmo pai e vêm imediatamente após o elemento selecionado. Um seletor de irmão adjacente é um seletor CSS que seleciona todos os elementos que são irmãos de um elemento especificado e estão imediatamente adjacentes a ele. O seletor de irmão adjacente é denotado por um sinal de mais (+) entre dois seletores.

Sintaxe

former_element + target_element {
  /* propriedades de estilo */
}

Suponha que tenhamos esta estrutura HTML:

<div class="container">
   <p>First paragraph</p>
   <span>Adjacent span</span>
   <p>Second paragraph</p>
</div>

Para estilizar o <span> imediatamente após um parágrafo, você usaria o seletor de irmão adjacente:

p + span {
   font-weight: bold;
}

Neste caso, o "Adjacent span" terá o peso da fonte em negrito.

Desafio

Fácil

Crie uma página web com um elemento p e um elemento span.
Use um seletor de irmão adjacente para estilizar o elemento span que é imediatamente adjacente ao elemento p para ter uma borda red.

Experimente você mesmo

<html>
<head>
    <title>Adjacent Sibling Selector Exercise</title>
    <style>
        /* CSS Code goes here */
    </style>
</head>
<body>
    
</body>
</html>

Todas as lições de Seletores CSS

1Introdução aos Seletores CSS

Objetivo dos Seletores CSS Por que eles são importantes?

4Seletores de atributo

Introdução aos seletores de atributo Presença e valores exatos Seletores de valor de atributo Seletores de valor de atributo II Seletores de valor de atributo III

2Seletores simples

Seletores de tipo Seletores de classe Seletores de ID Seletores universais

3Seletores Combinadores

Seletor de filho Seletor de descendenteSeletor de irmão adjacenteSeletor de irmão geral