Genel Kardeş Seçicisi

Coddy'nin HTML Journey'sinin CSS Mastery bölümünün bir parçası — ders 5 / 43.

Genel kardeş seçici (~), belirtilen bir öğenin kardeşi olan ve ondan sonra gelen tüm öğeleri seçer.

Örneğin:

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

Bu CSS ile:

h2 ~ p {
  color: blue;
}

Bu CSS'i uyguladıktan sonra sonuç şu şekilde olacaktır:

Paragraf 1 değişmeden kalır (h2'den sonra gelen bir kardeş öğe değildir)

Paragraf 2 mavi olur (h2'den sonra gelen bir kardeştir)
Paragraf 3 mavi olur (h2'den sonra gelen bir kardeştir)

Görev

Kolay

<h1> öğesinden sonra gelen tüm <p> öğelerinin parlak pembe (#ff69b4) renkte görünmesini sağlamak için genel kardeş seçiciyi (general sibling selector) kullanarak bir CSS kuralı oluşturun.

Kendin dene

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