Bitişik Kardeş Seçicisi

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

Bitişik kardeş seçici (+), belirli bir öğeden hemen sonra gelen bir öğeyi stillendirmek için kullanılır. Her ikisinin de aynı ebeveyne sahip olması gerekir ve "bitişik", "birbirinin hemen yanında" anlamına gelir.

Örneğin:

<h2>Heading</h2>
<p>This paragraph is styled</p>

Bu CSS ile:

h2 + p {
  font-weight: bold;
}

Paragraf, doğrudan bir h2 öğesinden sonra geldiği için stillendirilmiş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

Bir basketbol maçını betimleyen bir <h2> öğesini doğrudan takip eden yalnızca paragrafları (<p>) hedefleyen bir CSS seçicisi oluşturun. Bu paragrafları blue yazı tipi rengi ve 18px yazı tipi boyutu ile stillendirin.

Kopya kağıdı

Bitişik kardeş seçici (+), belirli bir öğeden hemen sonra gelen bir öğeyi stillendirir. Her iki öğe de aynı ebeveyne sahip olmalıdır.

Sözdizimi:

element1 + element2 {
  /* stiller */
}

Örnek:

h2 + p {
  font-weight: bold;
}

Bu, doğrudan bir h2 öğesini takip eden paragrafları hedefler.

Kendin dene

<html>
<head>
    <title>Adjacent Sibling Selector</title>
    <style>
        /* CSS solution goes here */
        
    </style>
</head>
<body>
    <h2>Basketball Game Overview</h2>
    <p>The basketball game was an exciting match between the **Los Angeles Lakers** and the **Golden State Warriors**, featuring intense offense and solid defense from both teams.</p>
    
    <p>During the first half, the Lakers held a slight lead, with LeBron James making key plays, while Stephen Curry of the Warriors kept the game tight with impressive three-pointers.</p>
    
    <p>This paragraph is not directly after an h2, so it should not be affected.</p>
    
    <p>In the second half, the Warriors fought back, with Klay Thompson hitting critical shots, but the Lakers secured their win with solid defense and a game-winning dunk by Anthony Davis.</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.