Selector Saudara Umum

Termasuk bagian Menguasai CSS dalam perjalanan HTML di Coddy. Pelajaran 5 dari 43.

Selector saudara umum (~) memilih semua elemen yang merupakan saudara dari elemen tertentu dan muncul setelahnya.

Contohnya:

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

Dengan CSS ini:

h2 ~ p {
  color: blue;
}

Setelah menerapkan CSS ini, hasilnya akan seperti berikut:

Paragraf 1 tetap tidak berubah (karena bukan elemen sibling yang muncul setelah h2)

Paragraf 2 menjadi biru (ini adalah elemen saudara yang muncul setelah h2)
Paragraf 3 menjadi biru (ini adalah elemen saudara yang muncul setelah h2)

Tantangan

Mudah

Buat aturan CSS menggunakan selector saudara umum agar semua elemen <p> yang muncul setelah <h1> menyala dalam warna merah muda cerah (#ff69b4).

Coba sendiri

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