CSS Seçiciler: Tür, Class, ID, Evrensel ve Attribute Seçicileri

Tür seçici: öğeyi adıyla seçmek

Tür seçici (type selector), öğeleri düğüm adlarına göre eşleştirir; yani belgedeki o türden bütün öğeleri seçer. a tüm bağlantıları, span tüm span öğelerini seçer. Tür seçiciler, belgeye özgü sınıf ya da kimlik eklemeden genel bir taban stil vermek için idealdir.

span {
  background-color: skyblue;
}
/* sonuç: sayfadaki tüm span öğelerinin arka planı açık mavi olur,
   p öğeleri etkilenmez */

SVG ya da MathML içeren belgelerde tür seçiciler @namespace ile bir ad alanına bağlanabilir. Örneğin ns|h1 yalnızca ns ad alanındaki h1 öğelerini, *|h1 tüm h1 öğelerini, |h1 ise ad alanı bildirilmemiş h1 öğelerini seçer. Sıradan HTML sayfalarında buna nadiren ihtiyaç duyarsınız.

Class seçici: en çok kullanılan araç

Class seçici, öğeleri class niteliğinin içeriğine göre eşleştirir ve sınıf adının önüne bir nokta (.) konularak yazılır. Bir öğenin class niteliğinde boşlukla ayrılmış birden fazla sınıf bulunabilir; seçici, sınıf listesinde ilgili adı içeren her öğeyle eşleşir.

/* class="genis" olan tüm öğeler */
.genis {
  margin: 2em;
}
/* yalnızca class="genis" olan li öğeleri */
li.genis {
  margin: 2em;
}
/* sınıf listesinde hem "genis" hem "zarif" olan li öğeleri,
   örneğin class="zarif retro genis" */
li.genis.zarif {
  margin: 2em;
}

<p class="kirmizi">Kırmızı metin.</p>
<p class="kirmizi sari-zemin">Kırmızı metin, sarı zemin.</p>

MDN, .sinif_adi yazımının [class~="sinif_adi"] attribute seçicisine denk olduğunu belirtir: "boşlukla ayrılmış kelime listesinde tam olarak bu kelime var mı?" sorusunu sorar. Bu yüzden .kirmizi, class="kirmizi sari-zemin" olan paragrafla da eşleşir.

Geçerli tanımlayıcı kuralı ve kaçış

Sınıf adı geçerli bir CSS tanımlayıcısı (identifier) olmalıdır. HTML'de class="123item" ya da class="item?one" yazmak mümkündür, ama bu adlar CSS'te olduğu gibi kullanılamaz. Rakamla başlayan ya da ? gibi özel karakter içeren adlar ters eğik çizgiyle kaçışlanmalıdır. Kaçışlanmamış hâlleri geçersizdir ve kural yok sayılır.

/* geçersiz: kural yok sayılır */
.item?one { background-color: green; }
.123item { background-color: green; }

/* geçerli: özel karakterler kaçışlandı */
.item\?one { background-color: pink; }
.\00003123item { background-color: yellow; }

İkinci örnekteki \000031, onaltılık 31 kodlu karakteri, yani 1 rakamını temsil eder; ardından gelen 23item ile birlikte sınıf adı 123item olur. Pratikte en kolay yol, sınıf adlarını baştan harfle başlatmak ve yalnızca harf, rakam, tire ve alt çizgi kullanmaktır.

ID seçici: tek bir öğeyi hedeflemek

ID seçici, öğeyi id niteliğinin değerine göre eşleştirir ve değerin önüne # konularak yazılır. Öğenin seçilmesi için id değerinin seçicideki değerle tam olarak aynı olması gerekir. Sınıf adlarındaki tanımlayıcı ve kaçış kuralları ID değerleri için de geçerlidir.

/* id="demo" olan öğe */
#demo {
  border: red 2px solid;
}

Bir belgede belirli bir id değerine sahip yalnızca bir öğe bulunmalıdır. MDN, aynı id birden fazla öğede kullanılmışsa ID seçicinin bunların hepsiyle eşleşeceğini de not eder; yani CSS sizi bu hatadan korumaz. MDN ayrıca #demo seçicisinin sözdizimi açısından [id="demo"] attribute seçicisine denk olduğunu, ama özgüllük açısından denk olmadığını vurgular. Bu fark, kuralların çakıştığı durumlarda belirleyicidir ve özgüllük hesaplama yazısında sayılarla gösteriliyor.

Evrensel seçici: *

Evrensel seçici (*) her türden öğeyle eşleşir. Teknik olarak özel bir tür seçicidir, bu yüzden tür seçiciler gibi ad alanıyla da kullanılabilir (ns|*, *|*, |*).

/* tüm öğeler */
* {
  color: green;
}
/* ikisi aynı anlama gelir */
*.uyari { color: red; }
.uyari  { color: red; }

MDN iki ayrıntıya dikkat çeker. Birincisi, basit seçicilerle birlikte yıldız isteğe bağlıdır; *.uyari ile .uyari eşdeğerdir. İkincisi, evrensel seçici yalnızca öğelerle eşleşir, pseudo-element'lerle doğrudan eşleşmez. Sayfadaki tüm ::before parçalarını seçmek isterseniz *::before yazmanız gerekir; bu çalışır çünkü * her öğeyi seçer ve ::before her öğede bulunabilir. Pseudo-element'lerin ayrıntısı ::before ve ::after yazısında.

Attribute seçicileri

Attribute seçicileri, öğeleri belirli bir niteliğin açıkça ayarlanmış olmasına ya da o niteliğin değerine göre seçer. Köşeli parantez içinde yazılır ve yedi temel biçimi vardır:

/* sayfa içi bağlantılar */
a[href^="#"] {
  background-color: gold;
}
/* adresinde "example" geçen bağlantılar */
a[href*="example"] {
  background-color: silver;
}
/* https:// ile başlayıp .org ile biten bağlantılar */
a[href^="https://"][href$=".org"] {
  color: green;
}

Son örnekte iki attribute seçicisi arada boşluk olmadan yan yana yazılmıştır; bu, aynı öğenin iki koşulu birden sağlaması gerektiği anlamına gelir. |= biçimi özellikle dil kodları için kullanılır: [lang|="zh"] hem zh-Hans-CN hem zh-Hant-TW değerleriyle eşleşir.

Büyük küçük harf ve i, s bayrakları

Attribute değerlerinin büyük küçük harfe duyarlılığı belge diline bağlıdır. HTML'de nitelik adları duyarsızdır; belirtimde tanımlı numaralandırılmış değerler (örneğin input öğesinin type değeri) de duyarsız eşleşir. class, id ve data-* nitelikleri ile HTML dışında tanımlanan role ve aria-* gibi nitelikler ise duyarlıdır. Kapanış köşeli parantezinden önce i eklerseniz karşılaştırma (ASCII aralığındaki karakterler için) duyarsız, s eklerseniz duyarlı yapılır.

/* "insensitive", "InSensitive", "INSENSITIVE" hepsi eşleşir */
a[href*="insensitive" i] {
  color: cyan;
}
/* yalnızca tam olarak "cAsE" yazımı eşleşir */
a[href*="cAsE" s] {
  color: pink;
}

Değer boşluk ya da özel karakter içeriyorsa tırnak içinde yazılmalıdır. Tırnak kullanmayı alışkanlık hâline getirmek bu tür hataları baştan önler.

Seçicileri birleştirmek: compound seçici

Arada boşluk bırakmadan art arda yazılan basit seçiciler bir compound seçici oluşturur. Bu yapı tek bir öğe üzerinde aynı anda sağlanması gereken koşulları ifade eder: a#secili, id değeri secili olan bir bağlantıdır; [type="checkbox"]:checked:focus işaretli ve odaklanmış bir onay kutusudur.

• Tür seçici ya da evrensel seçici kullanılacaksa dizinin başında yer almalıdır: p.not geçerlidir, .notp ise artık "notp" adlı bir sınıftır.
• Bir compound seçicide en fazla bir tür ya da evrensel seçici bulunabilir.
• Basit seçiciler arasına boşluk konmaz; çünkü boşluk alt öğe birleştiricisidir. p.not "not sınıflı paragraf", p .not ise "paragrafın içindeki not sınıflı herhangi bir öğe" demektir.

p {
  color: red;
}
.vurgu {
  text-decoration: underline;
}
p.vurgu#ozel {
  font-size: 1.5rem;
}
/* sonuç: class="vurgu" id="ozel" olan paragraf kırmızı, altı çizili
   ve 1.5rem boyutunda; sıradan paragraflar yalnızca kırmızı */

Seçici listesi ve tek seçicinin bütün kuralı bozması

Aynı bildirimleri paylaşan seçiciler virgülle ayrılarak bir seçici listesi hâlinde gruplanabilir. Virgülün önünde ve arkasında boşluk bırakılabilir; listeyi tek satırda ya da her seçici ayrı satırda olacak biçimde yazabilirsiniz. Bir öğe listedeki seçicilerden en az biriyle eşleşiyorsa kural ona uygulanır.

h1, h2, h3, h4, h5, h6 {
  font-family: "Helvetica", "Arial";
}

#ana,
.icerik,
article,
h1 + p {
  font-size: 1.1em;
}

Seçici listelerinin önemli bir dezavantajı vardır: listedeki tek bir geçersiz ya da desteklenmeyen seçici bütün kuralı geçersiz kılar. MDN bunu şu iki yazımla karşılaştırır:

/* ayrı kurallar: h1 ve h3 stillenir, yalnızca ortadaki kural atlanır */
h1 { font-family: sans-serif; }
h2:gecersiz-pseudo { font-family: sans-serif; }
h3 { font-family: sans-serif; }

/* liste: hiçbir başlık stillenmez, bütün kural yok sayılır */
h1,
h2:gecersiz-pseudo,
h3 {
  font-family: sans-serif;
}

Bu sorunu çözmenin yolu, listeyi :is() ya da :where() içine almaktır. Bu iki pseudo-class "bağışlayıcı" (forgiving) seçici listesi kabul eder; listedeki her seçici ayrı ayrı ayrıştırılır ve geçersiz olanlar yalnızca hiçbir şeyle eşleşmez. Bu iki pseudo-class'ın özgüllük farkı ve diğer kullanımları :has(), :is(), :where() ve :not() yazısında anlatılıyor.

Uygulamalı örnek: bir iletişim formunu seçicilerle biçimlendirmek

Öğrendiğimiz seçicileri küçük bir formda bir araya getirelim. Amaç, HTML'e her alan için ayrı bir sınıf eklemeden, öğelerin zaten sahip olduğu türleri ve nitelikleri kullanarak stil vermek.

<form id="iletisim">
  <input type="text" name="ad" required />
  <input type="email" name="eposta" required />
  <input type="tel" name="telefon" />
  <textarea name="mesaj"></textarea>
  <button type="submit" class="birincil">Gönder</button>
</form>

/* 1. Tüm metin girişleri ve textarea için ortak taban */
input,
textarea {
  border: 1px solid gray;
  padding: 0.5rem;
}

/* 2. Zorunlu alanlar: required niteliği olan input'lar */
input[required] {
  border-color: darkred;
}

/* 3. Yalnızca e-posta alanı */
input[type="email"] {
  font-family: monospace;
}

/* 4. Adı "tel" ile başlayan alanlar (telefon) */
[name^="tel"] {
  width: 12rem;
}

/* 5. Birincil gönder düğmesi */
button.birincil {
  font-weight: bold;
}

Sonuçları tek tek izleyelim. Birinci kural bir seçici listesidir ve dört alanın hepsine gri kenarlık ile iç boşluk verir. İkinci kural yalnızca required niteliği bulunan ad ve e-posta alanlarıyla eşleşir; bu iki alanın kenarlık rengi koyu kırmızıya döner, çünkü burada border-color daha sonra yazılmış ve daha özgül bir kuraldan gelir. Üçüncü kural type değeri tam olarak email olan alanı seçer. Dördüncü kural öğe türü belirtmeden, name değeri tel ile başlayan her öğeyi hedefler; formda bu yalnızca telefon alanıdır. Beşinci kural ise hem button türünde hem de birincil sınıfında olan öğeyi seçen bir compound seçicidir.

Bu örnekte type niteliğinin input öğesi için tanımlı numaralandırılmış bir değer olduğunu hatırlayın: HTML'de [type="EMAIL"] yazsanız da eşleşme büyük küçük harfe duyarsız yapılır. name niteliği ise numaralandırılmış bir değer listesi tanımlamaz; MDN'in anlattığı kurala göre bu tür nitelikler duyarlı karşılaştırıldığından [name^="tel"] büyük küçük harfe dikkat eder; name="Telefon" yazılmış bir alan bu seçiciyle eşleşmez. Gerekirse [name^="tel" i] ile duyarsız hâle getirebilirsiniz.

Sık yapılan seçici hataları

• Nokta veya kare işaretini unutmak: kart { } yazmak, kart adında bir HTML öğesi arar; sınıf için .kart gerekir.
• Compound seçicide fazladan boşluk: button .birincil, düğmenin içindeki bir öğeyi arar; düğmenin kendisi için button.birincil yazılmalıdır.
• Sınıf adını büyük küçük harf farkıyla yazmak: class değerleri duyarlı eşleştiği için .Kart ile .kart farklı sınıflardır.
• Attribute değerini tırnaksız ve boşluklu yazmak: Boşluk ya da özel karakter içeren değerler tırnak ister.
• Aynı id değerini birden fazla öğede kullanmak: CSS hepsini seçer, ama HTML açısından hatalıdır ve JavaScript tarafında sorun çıkarır.

Hangi seçiciyi ne zaman kullanmalı?

Sık Sorulan Sorular

Bir öğeye birden fazla class verebilir miyim?

Evet. class niteliğine boşlukla ayrılmış birden fazla ad yazabilirsiniz. Her ad kendi class seçicisiyle ayrı ayrı eşleşir; .a.b biçiminde yazılan compound seçici ise ikisine birden sahip öğeyi seçer.

Class adı rakamla başlayabilir mi?

HTML'de başlayabilir, ama CSS'te geçerli bir tanımlayıcı olmadığı için seçicide ters eğik çizgiyle kaçışlamanız gerekir. Adları harfle başlatmak bu zahmeti ortadan kaldırır.

#id ile [id="..."] arasında fark var mı?

Seçtikleri öğe aynıdır, ama özgüllükleri farklıdır: ID seçici ID sütununda, attribute seçici CLASS sütununda sayılır. Ayrıntılar özgüllük yazısında.

Seçici listesinde neden hiçbir kural çalışmıyor?

Büyük olasılıkla listedeki seçicilerden biri tarayıcı tarafından tanınmıyor. Şüpheli seçiciyi ayrı bir kurala taşıyın ya da listeyi :is() içine alın.

Evrensel seçici * ::before parçalarını da seçer mi?

Doğrudan seçmez; evrensel seçici yalnızca öğelerle eşleşir. Tüm öğelerin ::before parçalarına stil vermek için *::before biçiminde iki seçiciyi birlikte yazmanız gerekir.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: CSS öğrenme rehberi · CSS birleştiriciler · Özgüllük hesaplama · Pseudo-class · :has() ve :is()