Çalıştırılabilir CSS Dokümanları: Sözde sınıflar

Q: CSS'te nth-child nasıl çalışır?

:nth-child(an+b), kardeşleri arasındaki konumu n = 0, 1, 2 ve devamı için a×n+b olan elementlerle eşleşir, sayım 1'den başlar. :nth-child(3) üçüncü çocuktur, :nth-child(odd) ya da 2n+1 her tek sıradakidir, :nth-child(n+4) ise dördüncü ve sonrasıdır.

Q: nth-child ile nth-of-type arasındaki fark nedir?

:nth-child() bütün kardeş elementleri sayar, sonra seçicinin geri kalanını kontrol eder; :nth-of-type() yalnızca aynı türdeki kardeşleri sayar. Bir h2 ve ardından paragraflardan oluşan bir listede p:nth-child(1) hiçbir şeyle eşleşmez, p:nth-of-type(1) ise ilk paragrafla eşleşir.

Q: CSS'te :not() nasıl kullanılır?

Hariç tutulacak seçiciyi parantez içine yaz: li:not(.done), done class'ı olmayan her liste öğesiyle eşleşir. Liste de kabul eder: input:not([type="checkbox"], [type="radio"]).

Q: Sözde sınıf ile sözde element arasındaki fark nedir?

Bir sözde sınıf (tek iki nokta, :hover) belirli bir durumdaki mevcut bir elementin tamamını seçer. Bir sözde element (çift iki nokta, ::before) bir elementin bir parçasını hedefler ya da üretilmiş içerik oluşturur.

Sözde sınıf nedir

Bir sözde sınıf, iki noktadan sonra gelen ve elementleri belgedeki konumlarına ya da durumlarına göre seçen bir anahtar kelimedir. Onu normal bir seçiciye eklersin: li:first-child, input:focus, a:hover.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pseudo-classes</title>
  <style>
    li { padding: 6px 10px; list-style: none; }
    li:nth-child(odd) { background: #e5e7eb; }       /* zebra stripes */
    li:first-child { font-weight: bold; }
    li:last-child { color: #2563eb; }
    li:not(.done) { border-inline-start: 4px solid #f59e0b; }
  </style>
</head>
<body>
  <ul>
    <li>First child: bold</li>
    <li class="done">Done: no amber edge</li>
    <li>Odd rows are gray</li>
    <li class="done">Done</li>
    <li>Last child: blue</li>
  </ul>
</body>
</html>

Linkler ve fare için durum sözde sınıflarının (:hover, :active, :visited) kendi sayfası var: CSS hover.

:nth-child() ve an+b formülü

:nth-child() bir sayı, bir anahtar kelime ya da an+b formülü alır. Tarayıcı n = 0, 1, 2, ... değerlerini dener ve formülün ürettiği her konumla eşleşir (konumlar 1'den başlar).

Formül	Eşleştiği konumlar	Anlamı
`3`	3	Üçüncü çocuk
`odd` ya da `2n+1`	1, 3, 5, ...	Tek sıralar
`even` ya da `2n`	2, 4, 6, ...	Çift sıralar
`3n`	3, 6, 9, ...	Her üçüncü
`n+4`	4, 5, 6, ...	Dördüncü ve sonrası
`-n+3`	1, 2, 3	İlk üç
`3n+1`	1, 4, 7, ...	İlkinden başlayarak her üçüncü

Bir formül yaz ve hangi öğelerin eşleştiğini izle:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-child tester</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(6, 40px); gap: 6px; padding: 0; }
    .grid li {
      list-style: none;
      height: 40px;
      display: grid;
      place-items: center;
      background: #e5e7eb;
      border-radius: 6px;
    }
  </style>
  <style id="live"></style>
</head>
<body>
  <label>li:nth-child( <input id="f" value="3n+1" size="8"> )</label>
  <ul class="grid" id="grid"></ul>
  <script>
    const grid = document.getElementById('grid');
    for (let i = 1; i <= 18; i++) grid.innerHTML += '<li>' + i + '</li>';
    const input = document.getElementById('f');
    const update = () => {
      document.getElementById('live').textContent =
        '.grid li:nth-child(' + input.value + ') { background: #2563eb; color: white; }';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

odd, even, 4, n+7, -n+5 ve 2n+3 dene. Geçersiz bir formül hiçbir şeyle eşleşmez.

Sondan sayan ikizi :nth-last-child()'dır: li:nth-last-child(-n+2) son iki öğeyi seçer.

nth-child ve nth-of-type farkı

:nth-child(), etiketi ne olursa olsun her kardeş elementi sayar ve ancak ondan sonra seçicinin geri kalanını kontrol eder. :nth-of-type() yalnızca aynı etiketteki kardeşleri sayar. Fark, kardeşler karışık olduğu anda ortaya çıkar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-of-type</title>
  <style>
    p, h2 { margin: 4px 0; padding: 4px 8px; }
    p:nth-child(2) { background: #f59e0b; }   /* 2nd child AND a p */
    p:nth-of-type(2) { color: #2563eb; font-weight: bold; } /* 2nd p */
  </style>
</head>
<body>
  <h2>Heading (child 1)</h2>
  <p>Paragraph 1, child 2: amber</p>
  <p>Paragraph 2, child 3: blue and bold</p>
  <p>Paragraph 3, child 4</p>
</body>
</html>

Uçlar için de aynı çiftler vardır: :first-child / :first-of-type, :last-child / :last-of-type, :only-child / :only-of-type.

:not(), :is() ve :where()

Sözde sınıf	Örnek	Eşleştiği
`:not(X)`	`li:not(.done)`	X ile eşleşmeyen elementler
`:is(X, Y)`	`:is(h1, h2, h3) a`	Listedekilerden biriyle eşleşen elementler
`:where(X, Y)`	`:where(ul, ol) li`	`:is()` ile aynı, özgüllüğü sıfır
`:has(X)`	`li:has(> input:checked)`	X ile eşleşen bir şey içeren elementler

Her gün kullanılan :not()'tır, örneğin öğeler arasına ayırıcı koyup sonuncusundan sonra koymamak için:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>not</title>
  <style>
    .tags { padding: 0; }
    .tags li { display: inline; list-style: none; }
    .tags li:not(:last-child)::after { content: " · "; color: #2563eb; }
    input:not([type="checkbox"]) { border: 2px solid #16a34a; }
  </style>
</head>
<body>
  <ul class="tags"><li>html</li><li>css</li><li>js</li></ul>
  <input type="text" placeholder="Text: green border">
  <input type="checkbox" aria-label="Checkbox, default border">
</body>
</html>

Durum sözde sınıfları: focus, checked, disabled, invalid

Sözde sınıf	Eşleştiği
`:focus`	Klavye ya da fare odağına sahip element
`:focus-visible`	Odaklanmış ve tarayıcının bir halka göstermeye karar verdiği element (genelde klavye odağı)
`:focus-within`	Odaklanmış elementi içeren bir element
`:checked`	İşaretli bir checkbox, radio ya da seçili bir `<option>`
`:disabled` / `:enabled`	Devre dışı olan (ya da olmayan) form kontrolleri
`:required` / `:optional`	`required` taşıyan ya da taşımayan input'lar
`:invalid` / `:valid`	Değeri doğrulamadan kalan ya da geçen input'lar
`:user-invalid`	Geçersiz, ama yalnızca kullanıcı onunla etkileşime girdikten sonra
`:placeholder-shown`	Şu anda placeholder'ını gösteren bir input
`:empty`	Metin bile olmayan, hiç çocuğu olmayan bir element
`:target`	id'si URL'deki `#fragment` ile eşleşen element

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>States</title>
  <style>
    input { padding: 6px; border: 2px solid #e5e7eb; border-radius: 6px; outline: none; }
    input:focus-visible { border-color: #2563eb; }
    input:user-invalid { border-color: #f59e0b; }
    .field:focus-within label { color: #2563eb; }
    input:checked + label { text-decoration: line-through; color: #16a34a; }
    button:disabled { opacity: 0.4; }
  </style>
</head>
<body>
  <p class="field">
    <label for="mail">Email</label>
    <input id="mail" type="email" required placeholder="you@example.com">
  </p>
  <p>
    <input type="checkbox" id="task" checked>
    <label for="task">Checked task</label>
  </p>
  <button disabled>Disabled button</button>
</body>
</html>

E-posta alanına tıkla: etiketi :focus-within sayesinde maviye döner. E-posta olmayan bir şey yaz ve alandan çık: :user-invalid kenarlığı kehribar rengine çevirir. Düz :invalid ise boş olan zorunlu alanı sen dokunmadan kehribar rengiyle işaretlerdi.

:focus ile ne yaparsan yap, görünür bir odak stili bırak. Outline'ı yerine bir şey koymadan kaldırmak, klavye kullanıcılarının nerede olduklarını görememesine neden olur.

:has(), ebeveyn seçici

:has() bir elementi içerdiği şeye göre eşleştirir. Uzun zamandır istenen "ebeveyn seçici" budur ve güncel Chrome, Firefox ve Safari'de çalışır.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>has</title>
  <style>
    .option { display: block; border: 2px solid #e5e7eb; padding: 8px; margin: 6px 0; border-radius: 6px; }
    .option:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
  </style>
</head>
<body>
  <label class="option"><input type="radio" name="plan" checked> Monthly</label>
  <label class="option"><input type="radio" name="plan"> Yearly</label>
</body>
</html>

Diğer planı seç: bütün kart, hiç JavaScript olmadan radio butonunu takip eder.

Sık yapılan hatalar

İki noktadan önce boşluk. li :first-child, "bir li içindeki ilk çocuk" anlamına gelir. li:first-child yaz.
p:nth-child(1)'in "ilk p" anlamına gelmesini beklemek. "İlk çocuk, eğer bir p ise" anlamına gelir. İlk p için :first-of-type kullan.
0'dan saymak. Konumlar 1'den başlar: :nth-child(0) hiçbir şeyle eşleşmez.
Odak çerçevelerini kaldırmak. Yerine bir şey konmadan yazılan :focus { outline: none } klavyeyle gezinmeyi bozar.
: ile ::'yi karıştırmak. :before, ::before sözde elementinin eski yazımıdır; sözde sınıflar her zaman tek iki nokta kullanır.

Sıkça Sorulan Sorular

CSS'te pseudo-class (sözde sınıf) nedir?

İki noktadan sonra gelen ve elementleri adlarına göre değil, durumlarına ya da konumlarına göre seçen bir anahtar kelimedir: a:hover, li:first-child ya da input:focus gibi. Normal bir seçiciye eklenir ve çoğu sözde sınıf özgüllükte bir class gibi sayılır (:where() sıfır sayılır).

CSS'te nth-child nasıl çalışır?

:nth-child(an+b), kardeşleri arasındaki konumu n = 0, 1, 2 ve devamı için a×n+b olan elementlerle eşleşir, sayım 1'den başlar. :nth-child(3) üçüncü çocuktur, :nth-child(odd) ya da 2n+1 her tek sıradakidir, :nth-child(n+4) ise dördüncü ve sonrasıdır.

nth-child ile nth-of-type arasındaki fark nedir?

:nth-child() bütün kardeş elementleri sayar, sonra seçicinin geri kalanını kontrol eder; :nth-of-type() yalnızca aynı türdeki kardeşleri sayar. Bir h2 ve ardından paragraflardan oluşan bir listede p:nth-child(1) hiçbir şeyle eşleşmez, p:nth-of-type(1) ise ilk paragrafla eşleşir.

CSS'te :not() nasıl kullanılır?

Hariç tutulacak seçiciyi parantez içine yaz: li:not(.done), done class'ı olmayan her liste öğesiyle eşleşir. Liste de kabul eder: input:not([type="checkbox"], [type="radio"]).

Sözde sınıf ile sözde element arasındaki fark nedir?

Bir sözde sınıf (tek iki nokta, :hover) belirli bir durumdaki mevcut bir elementin tamamını seçer. Bir sözde element (çift iki nokta, ::before) bir elementin bir parçasını hedefler ya da üretilmiş içerik oluşturur.

İlgili kavramlar