Bitişik kardeş seçici
Coddy'nin CSS Seçicileri kursunda ders 9 / 15.
Bitişik kardeş seçicilere (adjacent sibling selectors) göz atalım. Bu seçiciler, aynı ebeveyni paylaşan ve seçilen öğeden hemen sonra gelen öğeleri hedefler. Bitişik kardeş seçici, belirtilen bir öğenin kardeşi olan ve ona hemen bitişik olan tüm öğeleri seçen bir CSS seçicisidir. Bitişik kardeş seçici, iki seçici arasındaki artı işareti (+) ile gösterilir.
Sözdizimi
former_element + target_element {
/* stil özellikleri */
}Şu HTML yapısına sahip olduğumuzu varsayalım:
<div class="container">
<p>First paragraph</p>
<span>Adjacent span</span>
<p>Second paragraph</p>
</div>Bir paragrafı hemen takip eden <span> öğesini stillendirmek için bitişik kardeş seçiciyi kullanırsınız:
p + span {
font-weight: bold;
}Bu durumda, "Adjacent span" kalın yazı tipine sahip olacaktır.
Görev
Kolay- Bir
pöğesi ve birspanöğesi içeren bir web sayfası oluşturun. pöğesinin hemen bitişiğinde olanspanöğesinin "red" bir kenarlığa sahip olması için bir bitişik kardeş seçici kullanın.
Kendin dene
<html>
<head>
<title>Adjacent Sibling Selector Exercise</title>
<style>
/* CSS Code goes here */
</style>
</head>
<body>
</body>
</html>