Seçiciler

Önceki ders biçem dosyasını belgeye bağladı. Dosyadaki her kural bir seçiciyle başlıyor ve şimdiye kadar yazılan seçiciler yalnızca öge adıydı: body, h1, td. Bu, ölçüm çizelgesindeki bütün hücreleri aynı biçimde ele almak demektir. Oysa çizelgede eksik ölçümleri işaretleyen hücreler var ve onların ayrı görünmesi gerekiyor.

Bu ders dört temel seçiciyi tanımlar: tür, sınıf, kimlik ve evrensel seçici. Her birinin belge ağacında hangi kümeyi döndürdüğü, çalıştırılabilir bir eşleyiciyle ölçülür.

Seçici Bir Küme Döndürür

Bir seçicinin işi tektir: belge ağacındaki düğümlere bakar ve bir alt küme döndürür. Döndürülen kümenin büyüklüğü sıfır da olabilir; boş küme bir hata değildir, kuralın hiçbir ögeye uygulanmaması demektir.

Aşağıdaki program, önceki kurstaki istasyon sayfasının küçültülmüş bir ağacını kurar ve dört seçici türünü bu ağaç üzerinde eşler. Ağaç, düğüm adını, sınıf listesini ve varsa kimliğini taşır — seçici eşlemesi için gereken bilgi budur.

// secici-esle.mjs — kucuk bir belge agaci uzerinde temel secicileri esler
const agac = {
  ad: "body", sinif: [], kimlik: null, cocuk: [
    { ad: "header", sinif: ["kunye"], kimlik: null, cocuk: [
      { ad: "h1", sinif: [], kimlik: null, cocuk: [] },
      { ad: "p", sinif: ["ozet"], kimlik: null, cocuk: [] },
    ]},
    { ad: "main", sinif: [], kimlik: "icerik", cocuk: [
      { ad: "table", sinif: ["olcum-cizelgesi"], kimlik: null, cocuk: [
        { ad: "tr", sinif: [], kimlik: null, cocuk: [
          { ad: "td", sinif: ["deger"], kimlik: null, cocuk: [] },
          { ad: "td", sinif: ["deger", "eksik"], kimlik: null, cocuk: [] },
        ]},
      ]},
      { ad: "p", sinif: ["ozet", "not"], kimlik: null, cocuk: [] },
    ]},
  ],
};

function* tumDugumler(d, yol = []) {
  const kendiYolu = [...yol, etiketle(d)];
  yield { dugum: d, yol: kendiYolu.join(" > ") };
  for (const c of d.cocuk) yield* tumDugumler(c, kendiYolu);
}

function etiketle(d) {
  return d.ad + (d.kimlik ? `#${d.kimlik}` : "") + d.sinif.map((s) => `.${s}`).join("");
}

// yalnizca basit secici: tur | .sinif | #kimlik | *
function esler(secici, d) {
  if (secici === "*") return true;
  if (secici.startsWith(".")) return d.sinif.includes(secici.slice(1));
  if (secici.startsWith("#")) return d.kimlik === secici.slice(1);
  return d.ad === secici;
}

const seciciler = ["*", "p", ".ozet", "#icerik", ".deger", ".eksik", "td", "#deger"];
for (const s of seciciler) {
  const bulunan = [...tumDugumler(agac)].filter(({ dugum }) => esler(s, dugum));
  console.log(`${s.padEnd(8)} -> ${bulunan.length} oge`);
  for (const b of bulunan) console.log(`           ${b.yol}`);
}

*        -> 10 oge
           body
           body > header.kunye
           body > header.kunye > h1
           body > header.kunye > p.ozet
           body > main#icerik
           body > main#icerik > table.olcum-cizelgesi
           body > main#icerik > table.olcum-cizelgesi > tr
           body > main#icerik > table.olcum-cizelgesi > tr > td.deger
           body > main#icerik > table.olcum-cizelgesi > tr > td.deger.eksik
           body > main#icerik > p.ozet.not
p        -> 2 oge
           body > header.kunye > p.ozet
           body > main#icerik > p.ozet.not
.ozet    -> 2 oge
           body > header.kunye > p.ozet
           body > main#icerik > p.ozet.not
#icerik  -> 1 oge
           body > main#icerik
.deger   -> 2 oge
           body > main#icerik > table.olcum-cizelgesi > tr > td.deger
           body > main#icerik > table.olcum-cizelgesi > tr > td.deger.eksik
.eksik   -> 1 oge
           body > main#icerik > table.olcum-cizelgesi > tr > td.deger.eksik
td       -> 2 oge
           body > main#icerik > table.olcum-cizelgesi > tr > td.deger
           body > main#icerik > table.olcum-cizelgesi > tr > td.deger.eksik
#deger   -> 0 oge

Dört Tür

Tür seçici (type selector) öge adını yazar ve o adı taşıyan bütün ögeleri döndürür. p seçicisi iki paragrafı da döndürdü: biri künyede, biri ana içerikte. Tür seçici belgedeki yerine bakmaz.

Sınıf seçici (class selector) nokta ile başlar ve class özniteliğinde o adı taşıyan ögeleri döndürür. Bir öge birden çok sınıf taşıyabilir; class="deger eksik" yazan hücre hem .deger hem .eksik seçicisiyle eşleşti. Sınıf adları boşlukla ayrılmış bir listedir ve sıraları anlam taşımaz.

Kimlik seçici (id selector) diyez ile başlar ve id özniteliği eşleşen ögeyi döndürür. Kimlikler belge içinde benzersiz olmalıdır; bu yüzden kimlik seçicisi en çok bir öge döndürür. #icerik bir öge döndürdü.

Evrensel seçici (universal selector) yıldızdır ve her ögeyle eşleşir. Örnekteki ağaçta on düğüm vardı ve on düğümü de döndürdü.

Son satır bir ayrımı gösterir: #deger sıfır öge döndürdü, çünkü deger bir sınıf adıdır, kimlik değil. Nokta ile diyezin karıştırılması, boş küme döndüren ve hiçbir uyarı üretmeyen bir kuraldır. Bir kuralın işlememesinin en sık sebeplerinden biri budur.

Bileşik Seçici

Basit seçiciler aralarında boşluk bırakılmadan yan yana yazıldığında bileşik seçici (compound selector) oluşur ve hepsini birden sağlayan ögeleri döndürür. Küme işlemleriyle söylenirse: kesişim.

td.eksik      { color: #8a1c1c; }
p.ozet.not    { font-style: italic; }

Birinci seçici, hem td olan hem eksik sınıfını taşıyan hücreleri döndürür. Örnek ağaçta bu tek hücredir. İkinci seçici üç koşulu birden ister ve yine tek ögeye ulaşır.

Bileşik seçicide tür seçici varsa en başta yazılır: td.eksik geçerlidir, .eksikt d başka bir şeydir. Tür seçici yazılmadığında evrensel seçici varsayılır; .eksik ile *.eksik aynı kümeyi döndürür.

Sınıf mı, Kimlik mi

İkisi de belgeye yazarın koyduğu adlardır. Aralarındaki teknik fark tektir: kimlik benzersizdir, sınıf değildir. Bu farktan iki ayrı sonuç çıkar.

Kimlik, belgeye tek bir yere işaret eden bir çapa koyar. Bağlantı hedefi (href="#icerik"), etiket–alan ilişkisi (for özniteliği) ve erişilebilirlik başvuruları kimlikle kurulur. Bunlar biçemle ilgili değildir; kimliğin asıl işi budur.

Sınıf ise bir sınıfa ait olmayı bildirir. Biçemin ihtiyaç duyduğu şey tam olarak budur: “bu hücre eksik ölçüm taşır”, “bu paragraf özettir”. Aynı bildirim belgede kaç kez geçerse geçsin aynı biçemi almalıdır.

Biçemde kimlik seçicisi kullanmanın sorunu, işlemediğinde değil, işlediğinde ortaya çıkar: kimlik seçicisinin özgüllüğü sınıf seçicisinden yüksektir ve bir kez yazıldığında onu bastırmak için yine bir kimlik seçicisi gerekir. Bu hesabı basamaklama ve özgüllük dersinde sayıyla yapacağız. Şimdilik uygulanabilir kural şudur: biçem sınıfla yazılır, kimlik başvuru içindir.

Sınıf Adı Anlamı Adlandırır, Görünümü Değil

Bir sınıf adı iki türlü seçilebilir. .kirmizi görünümü adlandırır; .eksik durumu adlandırır. İkisi de aynı hücreye takılabilir ve başlangıçta aynı sonucu verir.

Fark, karar değiştiğinde görünür. Eksik ölçümlerin kırmızı yerine gri gösterilmesine karar verilirse, .kirmizi adı yalan söylemeye başlar: adı kırmızı, rengi gri bir sınıf kalır. Düzeltmek için belgenin kendisine dokunmak, sınıf adını her geçtiği yerde değiştirmek gerekir. .eksik adında ise değişen tek şey bir bildirimin değeri olur; belge sabit kalır.

Bu, Web’in Temelleri ve HTML kursunda kurulan yapı–sunum ayrımının sınıf adlarındaki karşılığıdır: belge ne olduğunu söyler, biçem dosyası nasıl görüneceğini.

İstasyon sayfasının sınıf adları bu ilkeye göre seçilmiştir:

/* istasyon.css — 2. adım: durum sınıfları */
.olcum-cizelgesi td.deger { text-align: right; }
.olcum-cizelgesi td.eksik { color: #8a1c1c; }
.kunye .ozet              { font-size: 1.125rem; }

Son kuralda iki seçici arasında bir boşluk var ve bu boşluk bir işleçtir — bileşik seçici değil, bir ilişki bildirimidir. Sonraki ders bu işleci ve akrabalarını tanımlar.

Özet

• Bir seçici belge ağacından bir alt küme döndürür; boş küme döndürmesi hata değildir, yalnızca kuralın hiçbir ögeye uygulanmaması demektir.
• Tür seçici öge adıyla, sınıf seçici nokta ile, kimlik seçici diyez ile yazılır; evrensel seçici yıldızdır ve her ögeyle eşleşir.
• Basit seçiciler boşluksuz yan yana yazıldığında bileşik seçici olur ve koşulların kesişimini döndürür; tür seçici en başta yazılır.
• Kimlik belge içinde benzersizdir ve asıl işi başvuru hedefi olmaktır; biçem sınıfla yazılır, çünkü bir biçem kararı birden çok ögeye uygulanır.
• Sınıf adı görünümü değil anlamı adlandırır; görünümü adlandıran ad, biçem kararı değiştiğinde belgeyi de değiştirmeye zorlar.

Sonraki Adım

Bu dersteki seçiciler ögenin kendisine baktı: adı ne, hangi sınıfları taşıyor, kimliği var mı. Belge ağacındaki konumu hiç kullanılmadı — oysa “yalnızca ölçüm çizelgesinin içindeki hücreler” gibi bir istek, ögenin nerede durduğunu sormayı gerektirir. Sonraki ders ağaçtaki ilişkileri seçiciye taşıyan birleştiricileri tanımlar ve bir seçicinin sağdan sola nasıl değerlendirildiğini gösterir.