Selektor ogólnego rodzeństwa

Część sekcji Mistrzowskie opanowanie CSS ścieżki HTML w Coddy. Lekcja 5 z 43.

Selektor rodzeństwa ogólnego (~) wybiera wszystkie elementy, które są rodzeństwem określonego elementu i występują po nim.

Na przykład:

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

Przy użyciu tego CSS:

h2 ~ p {
  color: blue;
}

Po zastosowaniu tego CSS wynik będzie następujący:

Akapit 1 pozostaje bez zmian (nie jest elementem tego samego poziomu, który występuje po h2)

Akapit 2 staje się niebieski (to element siostrzany, który występuje po h2)
Akapit 3 staje się niebieski (to element siostrzany, który występuje po h2)

Wyzwanie

Łatwy

Utwórz regułę CSS z użyciem selektora ogólnego rodzeństwa, aby wszystkie elementy <p>, które występują po elemencie <h1>, wyróżniały się jaskrawym różem (#ff69b4).

Spróbuj swoich sił

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