CSS ve JavaScript
Bir JavaScript belge sorgusundaki DOM seçicileri aynı olduğundan, CSS ile pek ilgilenmeseniz bile seçicileri öğrenmenin JavaScript yazmanıza (vanilya) yardımcı olacağını unutmayın.
Bir seçiciyle eşleşen tüm öğeleri almak için bu sorgu: .js
document.querySelectorAll('article h2')
Bir seçiciyle eşleşen tüm öğelere stil vermek için bu CSS ile aynı öğelerin tümünü hedefler: .css
article h2 {
}
Not: Tüm seçiciler, yalnızca tek bir öğeye uygulanabilen kimlikler dışında bir veya daha fazla öğeyi hedefleyebilir.
Bir boşluk birçok şey ifade eder
Bu ikisi arasındaki farkı biliyor musunuz?
.speed.bar
.
speed
.bar
İlki, aynı öğedeki bir speed ve barı hedefler.
.speed.bar örnek
.speed.bar {
/* boşluksuz */
}
<div class="speed bar">Örnek</div>
İkincisi, bir speed in soyundan gelen bir çubuğu hedefler.
.speed .bar örnek
.speed .bar {
/* boşluklu */
}
<div class="speed">
<div class="bar">Örnek</div>
</div>
Seçiciyi değiştirmek için boşluk yerine kullanılabilecek >, + ve ~ gibi başka seçiciler vardır. Bunların hepsinin farklı anlamları var. Çok sık kullanılmazlar, böylece gerektiğinde öğrenebilirsiniz.
Seçici Örnekleri
Seçici | Hedef | Örnek |
---|---|---|
Evrensel seçici | Tüm elementler | * |
Tip seçici | Etiketler, html etiketleri | h1 , div , li::before |
Sınıf Seçiciler | Sınıflar ve sınıf özellikleri | .page-header , .page-content , .list-item:hover |
Özellik seçici | Özellikler | [alt] , [type="text"] , [lang="en"] |
ID Seçiciler | IDler | #toggle , #getting-started , #about |