Ribiru ailemize yeni yazar arkadaşlar arıyoruz! Aramıza katılmak isterseniz buraya tıklayın!

4- HTML – CSS Kavramları ve Temelleri İçin Bir Kılavuz: CSS ve JavaScript

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çiciHedefÖrnek
Evrensel seçiciTüm elementler*
Tip seçiciEtiketler, html etiketlerih1divli::before
Sınıf SeçicilerSı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çicilerIDler#toggle#getting-started#about

Zeen is a next generation WordPress theme. It’s powerful, beautifully designed and comes with everything you need to engage your visitors and increase conversions.