CSS'de Kardeş Seçici
Kardeş seçici ~, aynı ebeveyn içinde
belirtilen bir öğeden sonra gelen tüm öğeleri
seçmeye yarar.
Sözdizimi
seçici1 ~ seçici2 {
}
Örnek
h2 etiketlerinden sonra gelen tüm
p etiketlerine kırmızı renk verelim:
<div>
<h2>text</h2>
<p>
+
</p>
<p>
+
</p>
<p>
+
</p>
</div>
<p>
-
</p>
h2 ~ p {
color: red;
}
:
Örnek
.test sınıfına sahip öğelerden sonra
gelen tüm p etiketlerine kırmızı renk
verelim:
<div>
<p class="test">
text
</p>
<p>
+
</p>
<p>
+
</p>
</div>
<p>
-
</p>
.test ~ p {
color: red;
}
:
Örnek
.test sınıfına sahip öğelerden sonra
gelen ve .elem sınıfına sahip tüm
öğelere kırmızı renk verelim:
<div>
<p class="test">
text
</p>
<p class="elem">
+
</p>
<p>
-
</p>
<p class="elem">
+
</p>
</div>
<p>
-
</p>
.test ~ .elem {
color: red;
}
:
Ayrıca Bakınız
-
Alt Seçici,
doğrudan iç içe geçmiş öğeleri seçmeye yarayan -
Bağlamsal Seçici,
bir öğeyi ebeveynine göre seçmeye yarayan -
Bitişik Kardeş Seçici,
bir öğeyi komşusuna göre seçmeye yarayan -
Evrensel Seçici,
tüm öğeleri seçmeye yarayan
