Selettore fratello generale

Fa parte della sezione Padronanza di CSS del percorso HTML di Coddy. Lezione 5 di 43.

Il selettore di fratelli generali (~) seleziona tutti gli elementi che sono fratelli di un elemento specificato e che vengono dopo di esso.

Per esempio:

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

Con questo CSS:

h2 ~ p {
  color: blue;
}

Dopo aver applicato questo CSS, il risultato sarà:

Il paragrafo 1 rimane invariato (non è un elemento fratello che viene dopo h2)

Il paragrafo 2 diventa blu (è un elemento fratello che viene dopo h2)
Il paragrafo 3 diventa blu (è un elemento fratello che viene dopo h2)

Sfida

Facile

Crea una regola CSS usando il selettore di fratelli generali per far risaltare in rosa acceso tutti gli elementi <p> che vengono dopo l’elemento <h1> (#ff69b4).

Provalo tu

<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>