CSS · Sınıflar (class) ile seçmek — videolu atölye

Sınıflar (class) ile seçmek

Tekrar kullanılabilir sınıflarla öğeleri seçmek ve kaskadı okumak.

Kavramı kur

Bir sınıf HTML’de bir veya birden fazla öğeye verilen yeniden kullanılabilir bir addır. class="uyari" öğeyi adlandırır; .uyari seçicisi o adı taşıyanları bulur. Başındaki nokta CSS sözdiziminin parçasıdır, HTML class değerine yazılmaz. Aynı öğeye boşlukla ayrılmış birden fazla sınıf verebilirsin.

Neden böyle çalışıyor?

Sınıf adını öğenin o anki rengine göre değil görevine göre seçmek değişiklikleri kolaylaştırır. “kirmizi” yerine “uyari” demek, rengi değişse bile anlamı korur. Bir kuralı birden fazla öğede kullanmak kopya CSS miktarını azaltır; bu da ileride tutarsız tasarımları önler.

Çalışma sırası

Tarayıcı bir öğeye eşleşen kuralları birlikte değerlendirir. Bir sınıf kuralı ile genel etiket kuralı çakıştığında özgüllük önem kazanır. İlk aşamada karmaşık seçiciler yerine basit sınıflarla çalış; DevTools’ta hangi bildirimin geçersiz kaldığını görerek kaskadı öğren.

İkinci örnek · 1

class özelliğine nokta yazılmaz; CSS seçicisinde nokta bulunur. Kodun tamamı yazılı derste bulunur.

<style>
.kart { padding: 16px; border: 1px solid #cbd5e1; }
.uyari { background: #fff3cd; color: #704b00; }
</style>
<p class="kart">Normal not</p>
<p class="kart uyari">Kaydetmeden çıkma.</p>

Beklenen sonucu oku

Seçici yazımında büyük/küçük harf ve tireleri tutarlı kullan.

Beklenen: İki kartta aynı boşluk ve kenarlık; yalnızca ikinci kartta uyarı renkleri.

Bir değeri sen değiştir

Üç paragraf ekle; yalnızca birine uyari ver. Bir öğede kart ve uyari sınıflarını birlikte kullan.

Hata nereden gelir?

class=".uyari" yazmak CSS .uyari seçicisiyle amaçladığın adı oluşturmaz; HTML’de noktasız yaz.

Kendi çözümünü kur

.kart.uyari ve .kart .uyari seçicilerinin hangi HTML yapılarında çalıştığını ayrı örneklerle dene. İki seçici arasındaki boşluk “içinde bulunan” ilişkisi kurar.

Çözüm varyasyonu · 1

Önce kendi denemeni yap; sonra bu varyasyonun girdileri ile sonucunu karşılaştır.

<style>.not{padding:12px}.onemli{border-left:3px solid #2563eb}</style>
<p class="not">Birinci not</p><p class="not onemli">İkinci not</p>

Kendini kontrol et

.kart .uyari neyi seçer? Yanıt: kart sınıflı öğenin içinde bulunan uyari sınıflı öğeleri; iki sınıfı aynı öğede aramaz.

Beklenen: İki notun boşluğu eşit; ikinci notun sol kenarlığı var.