---
title: Seçiciler
source: 'https://academia.sh/tr/kurslar/css-temelleri/seciciler'
course: 'CSS ile Görsel Sunum'
language: tr
updated: '2026-08-17T18:09:17+00:00'
license: 'CC BY-SA 4.0'
---

# Seçiciler

Tür, sınıf, kimlik ve evrensel seçicilerin belge ağacında hangi kümeyi döndürdüğü; bileşik seçici kavramı ve sınıf adlarının anlamla adlandırılması.

Ö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.

```js
// 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.

```css
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:

```css
/* 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.