Çalıştırılabilir CSS Dokümanları: Class seçici

Q: CSS'te class nasıl seçilir?

Bir nokta ve ardından class adını yaz: .card { ... }, class="card" taşıyan her elemente stil verir. Nokta yalnızca CSS'te bulunur; HTML özniteliğinde nokta yoktur.

Q: Bir elemente iki class nasıl verilir?

Adları tek bir öznitelikte boşlukla ayır: class="btn primary". Bir elemente iki kez class yazmak çalışmaz; tarayıcı yalnızca ilk özniteliği tutar.

Q: İki class'a sahip bir element nasıl seçilir?

Class seçicileri boşluksuz zincirle: .btn.primary, iki class'a da sahip elementlerle eşleşir. Boşlukla yazılan .btn .primary ise bir .btn elementinin içindeki bir .primary elementi anlamına gelir.

Class seçici

Bir class seçici, bir nokta ve ardından gelen bir class adıdır. Element türü ne olursa olsun, class özniteliği o adı içeren her elemente stil verir.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Class selector</title>
  <style>
    .badge {
      background: #2563eb;
      color: white;
      padding: 2px 10px;
      border-radius: 999px;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <p>New <span class="badge">beta</span></p>
  <h2>Release <span class="badge">v2</span></h2>
  <a class="badge" href="#">a link with the class</a>
</body>
</html>

Nokta yalnızca CSS'te görünür. HTML'de öznitelik noktasız olarak class="badge" yazılır. Class adları büyük küçük harfe duyarlıdır: .Badge, class="badge" ile eşleşmez.

Bir elemente birden fazla class

Bir element boşlukla ayrılmış istediği sayıda class taşıyabilir. Her biri kendi kurallarını getirir; varyantları küçük parçalardan böyle kurarsın:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Multiple classes</title>
  <style>
    .btn {
      border: 2px solid #2563eb;
      background: white;
      color: #2563eb;
      padding: 8px 14px;
      border-radius: 6px;
    }
    .primary { background: #2563eb; color: white; }
    .large { font-size: 20px; }

    /* chained: only elements with BOTH classes */
    .btn.danger { border-color: #f59e0b; color: #111827; background: #f59e0b; }
  </style>
</head>
<body>
  <button class="btn">Default</button>
  <button class="btn primary">Primary</button>
  <button class="btn primary large">Primary large</button>
  <button class="btn danger">Danger</button>
  <span class="danger">.danger alone: no style</span>
</body>
</html>

Boşluksuz yazılan .btn.danger, iki class'a da sahip elementlerle eşleşir. Son span danger taşıyor ama btn taşımıyor, bu yüzden zincirlenmiş kural onu atlar.

Class seçici çeşitleri

Seçici	Eşleştiği
`.note`	`note` class'ına sahip herhangi bir element
`p.note`	Yalnızca `note` class'ına sahip `<p>` elementleri
`.btn.primary`	Hem `btn` hem `primary` taşıyan elementler
`.card .title`	Bir `.card` içinde herhangi bir yerdeki `.title`
`.card > .title`	Ebeveyni `.card` olan bir `.title`
`.a, .b`	`a` ya da `b` taşıyan elementler

Boşluklu ve boşluksuz yazım arasındaki fark, diğer birleştiricilerle birlikte CSS seçiciler sayfasında anlatılıyor.

ID seçici

Bir ID seçici, bir diyez işareti ve ardından gelen id'dir: #site-header, id="site-header" olan elemente stil verir. Bir id sayfada benzersiz olmalıdır, bu yüzden bir ID seçici tam olarak tek bir elementi hedefler.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ID selector</title>
  <style>
    #summary {
      border: 2px solid #16a34a;
      padding: 10px;
      border-radius: 6px;
    }
    #details { margin-top: 8px; background: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <div id="summary">Styled by #summary</div>
  <div id="details">Styled by #details</div>
</body>
</html>

Id'ler stil vermekten fazlasını yapar: href="#details" elemente kaydırır, <label for="email"> bir input'un id'sini gösterir ve JavaScript onu document.getElementById('details') ile bulur. Bir elemente id vermenin olağan nedeni budur; stil vermek içinse class daha iyi bir araçtır.

Class ve ID farkı

	Class `.name`	ID `#name`
Sayfa başına	Birçok element	Tek element
Element başına	Birden fazla, boşlukla ayrılmış	Bir tane
Özgüllük	(0,1,0)	(1,0,0)
Link hedefi (URL'de `#name`)	Hayır	Evet
En uygun olduğu yer	Stil vermek	Çapalar, label'lar, JavaScript kancaları

Özgüllük farkı, class'larla stil vermenin pratik nedenidir. Tek bir ID, kaç tane olursa olsun class'ları yener, bu yüzden ID ile yazılmış bir kural yalnızca başka bir ID, inline bir stil ya da !important ile ezilebilir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Specificity</title>
  <style>
    #promo { background: #e5e7eb; padding: 10px; }
    .card.featured.highlight { background: #f59e0b; } /* three classes */
  </style>
</head>
<body>
  <div id="promo" class="card featured highlight">
    Still gray: the ID beats three classes.
  </div>
</body>
</html>

JavaScript ile class eklemek ve kaldırmak

Class'lar, JavaScript'in bir şeyin görünümünü değiştirmesinin normal yoludur: CSS durumları tanımlar, script yalnızca aralarında geçiş yapar.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>classList</title>
  <style>
    .panel { border: 2px solid #e5e7eb; padding: 10px; border-radius: 6px; }
    .panel.open { border-color: #2563eb; background: #eff6ff; }
  </style>
</head>
<body>
  <button id="toggle">Toggle .open</button>
  <div class="panel" id="panel">The panel.</div>
  <script>
    const panel = document.getElementById('panel');
    document.getElementById('toggle').addEventListener('click', () => {
      panel.classList.toggle('open');
      panel.textContent = 'class="' + panel.className + '"';
    });
  </script>
</body>
</html>

classList ayrıca add, remove, contains ve replace sunar. className'e doğrudan atama yapmaktan kaçın: elementin sahip olduğu bütün class'ları değiştirir.

Class adlandırma

Harfler, rakamlar, tireler ve alt çizgiler güvenlidir: card, card-title, card__title, is-open.
Bir seçiciyi rakamla ya da ardından rakam gelen bir tireyle başlatma. .2col geçersiz CSS'tir. Bir harfle başla (.cols-2) ya da rakamı kaçış karakteriyle yaz (.\32 col).
Görünüme göre değil amaca göre adlandır: .error bir yeniden tasarımdan sağ çıkar, .red-text çıkmaz.
Büyük projelerde bir adlandırma kuralı işe yarar. BEM block__element--modifier yazar, örneğin .card__title--large.

Sık yapılan hatalar

Noktayı HTML'e koymak. class=".badge" hiçbir zaman .badge ile eşleşmez.
İki class özniteliği. <p class="a" class="b"> yalnızca a'yı tutar. class="a b" kullan.
İki class'ı kastederken boşluk bırakmak. .btn .primary iç içe bir element arar; .btn.primary aynı elementtir.
Bir id'yi tekrar kullanmak. Tekrarlanan id'ler, CSS çalışıyor gibi görünse bile getElementById'yi, çapa linklerini ve label bağlantılarını bozar.
Her şeye id ile stil vermek. Özgüllükleri sonraki ezmeleri zahmetli hale getirir; class kullan.

Sıkça Sorulan Sorular

CSS'te class nasıl seçilir?

Bir nokta ve ardından class adını yaz: .card { ... }, class="card" taşıyan her elemente stil verir. Nokta yalnızca CSS'te bulunur; HTML özniteliğinde nokta yoktur.

CSS'te class ile id arasındaki fark nedir?

Bir class istenen sayıda elementte kullanılabilir ve bir elementin birden fazla class'ı olabilir; bir id sayfada benzersiz olmalıdır ve bir elementin en fazla bir id'si olur. CSS'te #id, .class'tan çok daha yüksek özgüllüğe sahiptir, bu yüzden ID kurallarını ezmek daha zordur.

Bir elemente iki class nasıl verilir?

Adları tek bir öznitelikte boşlukla ayır: class="btn primary". Bir elemente iki kez class yazmak çalışmaz; tarayıcı yalnızca ilk özniteliği tutar.

İki class'a sahip bir element nasıl seçilir?

Class seçicileri boşluksuz zincirle: .btn.primary, iki class'a da sahip elementlerle eşleşir. Boşlukla yazılan .btn .primary ise bir .btn elementinin içindeki bir .primary elementi anlamına gelir.

CSS class adı rakamla başlayabilir mi?

HTML'de başlayabilir, ama bir seçici kaçış karakteri olmayan bir rakamla başlayamaz, bu yüzden .1col geçersiz CSS'tir. Rakamı kaçış karakteriyle yaz (.\31 col) ya da daha iyisi, class adlarını bir harfle başlat.

İlgili kavramlar