Tür, sınıf ve Kimlik seçicileri

Bu derste, muhtemelen çalışmalarında en sık kullanacağın en basit seçicilerden bazılarını inceleyeceğiz.

Ön koşullar: Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesidosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç: Farklı CSS seçicileri hakkında bilgi edinmek.

Tür seçiciler

Bir tür seçici, belgende bir HTML öğesini seçtiği için bazen etiket seçici veya  öğe seçici olarak anılır. Aşağıdaki örnekte, span, em ve strong seçicilerini kullandık.

<h1> etiketini seçip rengini maviye dönüştüren bir CSS kuralı eklemeyi deneyin.

Evrensel seçici

Evrensel seçici bir yıldız işaretiyle (*) gösterilir. Belgedeki(veya başka bir öğe ve bir alt birleştirici ile kullanmışsa ana öğenin içindekileri) her şeyi seçer. Aşağıdaki örnekte, tüm öğelerdeki kenar boşluklarını kaldırmak için evrensel seçiciyi kullanıyoruz. Bu, tarayıcının belgemizdeki başlıklara ve paragraflara varsayılan olarak eklediği kenar boşluklarını sıfırlayan bir kural ekler.

Bu tür davranışlar bazen tüm tarayıcı stilini kaldıran "stil sayfalarını sıfırlama"'da görünür. Evrensel seçici genel değişiklikler yaptığı için, onu aşağıda açıklandığı gibi çok özel durumlar için kullanıyoruz.

Seçicilerinin daha kolay okunmasını sağlamak için evrensel seçiciyi kullanma

Evrensel seçicinin bir kullanımı, seçicilerin daha kolay okunmasını ve ne yaptıkları açısından daha açık olmasını sağlamaktır. Örneğin,  <article> öğesinin ilk çocuğunu ve öğenin altında içindeki çocuklarınında ilk çocuklarını seçmek istersek, :first-child sözde sınıfını kullanabilirsin. <article> öğe seçiciyle birlikte bir alt seçici olarak Sözde sınıflar ve sözde öğeler kullanımı:

article :first-child {
  font-weight: bold;
}

Bunla birlikte, bir öğenin ilk çocuğu olan <article> öğesini  seçmek için kullanılan  article:first-child ile bu kullanım karıştırılabilinir. Aradaki beyaz boşluk kodların içerisinde gözden kaçabilir.

Bu karışıklığı önlemek için, :first-child sözde sınıfından önce evrensel seçiciyi ekleyebiliriz. Bu, <article> öğesinin de dahil soyundan gelen çoçuklarının, torunlarının.... ilk çocuğunu seçmek için kullanılır.

article *:first-child { 
  font-weight: bold;
} 

Her ikisi de aynı şeyi yapsa da, okunabilirliği önemli ölçüde arttırmış olduk.

Sınıf seçiciler

Sınıf seçici bir nokta (.) karakteriyle başlar. Belgedeki sınıfın uygulandığı her şeyi seçecektir. Aşağıdaki canlı örnekte; highlight adlı bir sınıf oluşturduk ve bunu belgemdeki birkaç yere uyguladık. Böylece CSS kuralları sınıfın uygulandığı tüm öğelere vurgulanır.

Belirli unsurlara göre sınıfları hedeflemek

Uygulanan sınıfla birlikte belirli öğeleri hedefleyecek bir seçici oluşturabilirsin. Bir sonraki örnekte, highlight sınıfına sahip <span> ve <h1> öğelerimize farklı stillerle vurgulayacağız.

Bu yaklaşım, bir kuralın kapsamını azaltır. Kural, yalnızca o belirli öğe ve sınıf kombinasyonu için geçerli olacaktır. Kuralın diğer öğeler için de geçerli olması gerektiğine karar verirsen, başka bir seçici eklemen gerekir.

Birden fazla sınıf uygulanmış bir öğeyi hedeflemek

Bir öğeye birden fazla sınıf uygulayabilir ve bunları ayrı ayrı hedefleyebilirsin veya yalnızca seçicideki tüm sınıflar mevcut olduğunda öğeyi seçerbilirsin. Bu, sitende farklı şekillerde birleştirilebilen bileşenler oluştururken yardımcı olabilir.

Aşağıdaki örnekte, <div> içerisinde bir notumuz var. Gri kenar, kutu bir notebox sınıfına dahilse uygulanır. Kutu ayrıca warning veya danger sınıflarından birine dahilse border-color'unu değiştirebiliriz.

Tarayıcıya, yalnızca iki sınıf uygulanmışsa, aralarında beyaz boşluk olmadan onları birbirine zincirleyerek eşleştirmek istediğimizi söyleyebiliriz. Sonuncu <div>'in sadece danger sınıfına dahil olduğu için stilin uygulanmadığını göreceksin.

Kimlik seçiciler

Kimlik seçici nokta karakterinden ziyade diyez # karakteriyle başlar. Ancak sınıf seçici ile aynı şekilde kullanılır. bununla birlikte, bir kimlik her sayfada yalnızca bir kez kullanılabilir ve öğelere  tek bir kimlik(id) uygulanabilir. Kimlik uygulanmış bir öğe seçebilir ve hem öğe hem de kimlik eşleşirse öğeyi hedeflemek için kimliğin önüne bir tür seçici ekleyebilirsin. Aşağıdaki örnekte bu kullanımların her ikisini de görebilirsin.

Uyarı: Bir belgede aynı kimliği birden çok kez kullanmak stil oluşturma amacıyla işe yarayabilir, ancak bunu yapmayın. Geçersiz kodla sonuçlanır ve birçok yerde garip davranışlara neden olabilir.

Not: Özgüllük dersinde öğrendiğimiz gibi, bir kimliğin yüksek özgüllüğü vardır. Diğer çoğu seçiciyi geçersiz kılacaktır. Çoğu durumda, bir öğeye bir kimlik yerine bir sınıf eklemek tercih edilir. Ancak, öğeyi hedeflemenin tek yolu kimliği kullanmaksa — işaretlemeye erişimin olmadığı ve onu düzenleyemediğin için — bu işe yarayacaktır.

Sonraki derste

Nitelik seçicileri inceleyerek seçicileri keşfetmeye devam edeceğiz.

Bu kısımda

  1. Kaynak sırası ve miras
  2. CSS seçicileri
  3. Kutu modeli
  4. Arka planlar ve kenarlıklar
  5. Farklı metin yönleri kullanma
  6. Taşan içerik
  7. Değerler ve birimler
  8. CSS'de öğelerin boyutları
  9. Görseller, medya ve form öğeleri
  10. Tabloları şekillendirme
  11. CSS'de hata ayıklama
  12. CSS'ini düzenleme