Seletor de Irmão Geral

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

O seletor de irmãos gerais (~) seleciona todos os elementos que são irmãos de um elemento especificado e aparecem depois dele.

Por exemplo:

<div>
  <p>Paragraph 1</p>
  <h2>Heading</h2>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

Com este CSS:

h2 ~ p {
  color: blue;
}

Após aplicar este CSS, o resultado será:

O parágrafo 1 permanece inalterado (não é um irmão que vem depois de h2)

O parágrafo 2 fica azul (é um irmão que vem depois de h2)
O parágrafo 3 fica azul (é um irmão que vem depois de 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 uma regra CSS usando o seletor de irmãos gerais para fazer com que todos os elementos <p> que vêm depois do <h1> brilhem em rosa choque (#ff69b4).

Folha de consulta

O seletor geral de irmãos (~) seleciona todos os elementos que são irmãos de um elemento especificado e aparecem depois dele.

h2 ~ p {
  color: blue;
}

Isso seleciona todos os elementos <p> que são irmãos de <h2> e aparecem depois dele na estrutura HTML.

Experimente você mesmo

<html>
<head>
    <title>General Sibling Selector</title>
    <style>
        /* CSS solution goes here */

    </style>
</head>
<body>
    <h1>Welcome to the Party!</h1>
    <p>Grab a drink.</p>
    <p>Say hello to new friends.</p>
    <div>Dance floor area</div>
    <p>Take a selfie!</p>
    <p>Enjoy the snacks.</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.