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)

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

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.

Kopya kağıdı

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

h2 ~ p {
  color: blue;
}

Bu, HTML yapısında <h2> öğesinin kardeşi olan ve ondan sonra gelen tüm <p> öğelerini seçer.

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>

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.