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

Q: CSS seçici nedir?

Bir CSS kuralının { işaretinden önceki, bildirimlerin hangi elementlere uygulanacağını söyleyen kısmıdır. p.note { color: blue; } kuralında p.note seçicisi, note class'ına sahip her ile eşleşir.

Q: CSS seçicide boşluk ile > arasındaki fark nedir?

Boşluk, alt öğe birleştiricisidir: nav a, bir nav içinde hangi derinlikte olursa olsun her linkle eşleşir. > ise çocuk birleştiricisidir: nav > a yalnızca doğrudan ebeveyni nav olan linklerle eşleşir.

Q: CSS'te + ne anlama gelir?

+, bitişik kardeş birleştiricisidir. h2 + p, aynı ebeveyne sahip bir 'den hemen sonra gelen ile eşleşir. ~ daha gevşektir: h2 ~ p, sonraki her kardeşle eşleşir.

Q: CSS'te elementler özniteliğe göre nasıl seçilir?

Özniteliği köşeli parantez içine yaz: [disabled] o özniteliğe sahip elementlerle, [type="email"] tam bir değerle, [href^="https"] bir metinle başlayan bir değerle, [href$=".pdf"] onunla biten bir değerle ve [class*="btn"] onu içeren bir değerle eşleşir.

Q: CSS ile ebeveyn element seçilebilir mi?

Evet, güncel Chrome, Firefox ve Safari'de desteklenen :has() sözde sınıfıyla. li:has(> a.active), doğrudan aktif bir link içeren liste öğeleriyle eşleşir.

CSS seçici nedir

Seçici, bir kuralın süslü parantezlerden önceki kısmıdır. Bildirimlerin hangi elementlere uygulanacağına o karar verir.

p.note { color: #2563eb; }
/* selector: p.note    declaration: color: #2563eb */

Beş temel seçici gerçek stil dosyalarının çoğunu karşılar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Basic selectors</title>
  <style>
    * { box-sizing: border-box; }           /* universal: every element */
    p { margin: 6px 0; }                    /* type: every <p> */
    .tip { background: #e5e7eb; padding: 6px; } /* class */
    #main-title { color: #2563eb; }         /* ID: one element */
    h2, .lead { font-style: italic; }       /* group: either one */
  </style>
</head>
<body>
  <h1 id="main-title">Selectors</h1>
  <p class="lead">A lead paragraph (grouped with h2).</p>
  <p class="tip">A tip, matched by .tip</p>
  <h2>A subheading</h2>
  <p>A plain paragraph.</p>
</body>
</html>

Bir bakışta seçici türleri

Seçici	Örnek	Eşleştiği
Evrensel	`*`	Her element
Tür	`p`	Her `<p>`
Class	`.tip`	`class="tip"` taşıyan elementler (başka class'larla birlikte de)
ID	`#main-title`	`id="main-title"` olan element
Öznitelik	`[type="email"]`	Özniteliği eşleşen elementler
Sözde sınıf	`a:hover`, `li:first-child`	Bir durumdaki ya da konumdaki elementler
Sözde element	`p::first-line`, `.x::before`	Bir elementin bir parçası
Grup	`h1, h2, h3`	Listedekilerden biriyle eşleşen her şey
Bileşik	`p.tip`	Aynı zamanda o class'a sahip bir `<p>`

Class ve ID'lerin kendi sayfası var: CSS class seçici. :nth-child() ve :not() gibi sözde sınıflar sözde sınıflar sayfasında anlatılıyor.

Birleştiriciler: alt öğe ve çocuk

Bir birleştirici, iki seçiciyi HTML ağacındaki ilişkilerine göre bağlar. Dört tane vardır.

Birleştirici	Söz dizimi	`B` ne zaman eşleşir
Alt öğe	`A B` (boşluk)	B, A'nın içinde herhangi bir yerde
Çocuk	`A > B`	B'nin ebeveyni A
Bitişik kardeş	`A + B`	B, A'dan hemen sonra, aynı ebeveyn
Genel kardeş	`A ~ B`	B, A'dan sonra bir yerde, aynı ebeveyn

İnsanların karıştırdığı ikili boşluk ve > işaretidir. Alt öğe seçici her derinliğe ulaşır; çocuk seçici bir seviyede durur:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Child selector</title>
  <style>
    li { padding: 2px 6px; margin: 2px 0; }
    .all li { background: #e5e7eb; }          /* descendant: every level */
    .direct > li { border-inline-start: 4px solid #2563eb; } /* child: top level only */
  </style>
</head>
<body>
  <ul class="all direct">
    <li>Top level: gray and blue edge</li>
    <li>Top level: gray and blue edge
      <ul>
        <li>Nested: gray only</li>
        <li>Nested: gray only</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Kardeş birleştiricileri: + ve ~

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Siblings</title>
  <style>
    p { margin: 4px 0; padding: 4px 8px; }
    h2 + p { background: #f59e0b; }   /* only the first p after h2 */
    h2 ~ p { color: #2563eb; }        /* every p after h2 */
  </style>
</head>
<body>
  <p>Before the heading: untouched.</p>
  <h2>Heading</h2>
  <p>Right after h2: amber and blue.</p>
  <p>Later sibling: blue only.</p>
  <p>Later sibling: blue only.</p>
</body>
</html>

Kardeşler yalnızca ileriye bakar. "Önceki kardeş" birleştiricisi yoktur, ama :has() bunu ifade edebilir: h2:has(+ p), hemen ardından bir p gelen bir h2 ile eşleşir.

Öznitelik seçiciler

Köşeli parantezler özniteliklere ve değerlerine göre eşleşir:

Seçici	Eşleştiği
`[disabled]`	Özniteliğe sahip, değeri ne olursa olsun
`[type="email"]`	Değer tam olarak `email`
`[href^="https"]`	Değer `https` ile başlar
`[href$=".pdf"]`	Değer `.pdf` ile biter
`[class*="icon"]`	Değer herhangi bir yerinde `icon` içerir
`[lang\|="en"]`	Değer `en` ya da `en-` ile başlıyor
`[data-state="open" i]`	Büyük küçük harf gözetmeden tam eşleşme

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attribute selectors</title>
  <style>
    a { display: block; margin: 4px 0; }
    a[href^="https"] { color: #16a34a; }
    a[href$=".pdf"] { font-weight: bold; }
    a[href$=".pdf"]::after { content: " (PDF)"; }
    input[type="email"] { border: 2px solid #2563eb; }
    [data-state="open"] { background: #e5e7eb; padding: 4px; }
  </style>
</head>
<body>
  <a href="https://example.com">External, https: green</a>
  <a href="/guide.pdf">Guide, bold with a label</a>
  <a href="/about">Relative link: untouched</a>
  <input type="email" placeholder="Email: blue border">
  <div data-state="open">data-state="open"</div>
</body>
</html>

data-* özniteliklerindeki öznitelik seçiciler, class adı uydurmadan JavaScript'in ayarladığı durumlara stil vermenin temiz bir yoludur.

Herhangi bir seçiciyi dene

Kutuya bir seçici yaz. Eşleştiği her element kehribar rengi bir çerçeve alır ve sayısı aşağıda görünür.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Selector tester</title>
  <style>
    .hit { outline: 3px solid #f59e0b; }
    #demo { border: 1px solid #e5e7eb; padding: 8px; margin-top: 8px; }
    #demo * { margin: 4px 0; }
  </style>
</head>
<body>
  <input id="sel" value="#demo li:nth-child(2)" size="30">
  <span id="out"></span>
  <div id="demo">
    <h2 class="title">Title</h2>
    <p class="intro">Intro <a href="/a">link</a></p>
    <ul>
      <li>One</li>
      <li class="active">Two</li>
      <li>Three <a href="https://example.com">external</a></li>
    </ul>
  </div>
  <script>
    const sel = document.getElementById('sel');
    const out = document.getElementById('out');
    const run = () => {
      document.querySelectorAll('.hit').forEach((el) => el.classList.remove('hit'));
      try {
        const found = document.querySelectorAll(sel.value);
        found.forEach((el) => el.classList.add('hit'));
        out.textContent = found.length + ' match(es)';
      } catch (e) {
        out.textContent = 'Invalid selector';
      }
    };
    sel.addEventListener('input', run);
    run();
  </script>
</body>
</html>

#demo a, ul > li, h2 ~ *, a[href^="https"], li:not(.active) dene.

Bileşik ve alt öğe: boşluk önemlidir

p.note ile p .note arasında bir boşluk fark vardır ve farklı anlamlara gelirler.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Space matters</title>
  <style>
    p.note { background: #e5e7eb; }      /* a p that has .note */
    p .note { color: #16a34a; font-weight: bold; } /* a .note inside a p */
  </style>
</head>
<body>
  <p class="note">p.note: gray background</p>
  <p>Plain p with a <span class="note">span.note inside</span></p>
</body>
</html>

Tarayıcılar seçicileri nasıl okur

Birden fazla kural aynı elementle eşleşip aynı özelliği ayarladığında daha özgül seçici kazanır, eşitlikte sonraki kazanır. Bir ID kaç tane olursa olsun class'lardan, bir class da kaç tane olursa olsun tür seçicilerinden ağır basar; özgüllük tablosunun tamamı !important sayfasında.

Grupların bir püf noktası vardır: düz bir listedeki seçicilerden biri geçersizse kuralın tamamı atılır. a, b:unknown { } içinde linklere bile stil verilmez. Listeyi :is() ile sarmak onu hoşgörülü yapar, böylece :is(a, b:unknown) linklere yine stil verir.

Sık yapılan hatalar

Noktayı ya da diyez işaretini unutmak. tip { }, class="tip" değil, bir <tip> elementini hedefler. .tip yaz.
Bileşik seçicide boşluk. p .note, p.note değildir.
> işaretinin torunlara ulaşmasını beklemek. Her derinlik için boşluk kullan.
Tek bir yazım hatası bütün grubu bozar. h1, h2:hovr, h3 içinde hiçbir şeye stil verilmez.
Aşırı uzun seçiciler. body div.wrapper ul li a okunması zor ve ezilmesi zordur. Genellikle tek bir class yeterlidir.

Sıkça Sorulan Sorular

CSS seçici nedir?

Bir CSS kuralının { işaretinden önceki, bildirimlerin hangi elementlere uygulanacağını söyleyen kısmıdır. p.note { color: blue; } kuralında p.note seçicisi, note class'ına sahip her <p> ile eşleşir.

CSS seçicide boşluk ile > arasındaki fark nedir?

Boşluk, alt öğe birleştiricisidir: nav a, bir nav içinde hangi derinlikte olursa olsun her linkle eşleşir. > ise çocuk birleştiricisidir: nav > a yalnızca doğrudan ebeveyni nav olan linklerle eşleşir.

CSS'te + ne anlama gelir?

+, bitişik kardeş birleştiricisidir. h2 + p, aynı ebeveyne sahip bir <h2>'den hemen sonra gelen <p> ile eşleşir. ~ daha gevşektir: h2 ~ p, sonraki her <p> kardeşle eşleşir.

CSS'te elementler özniteliğe göre nasıl seçilir?

Özniteliği köşeli parantez içine yaz: [disabled] o özniteliğe sahip elementlerle, [type="email"] tam bir değerle, [href^="https"] bir metinle başlayan bir değerle, [href$=".pdf"] onunla biten bir değerle ve [class*="btn"] onu içeren bir değerle eşleşir.

CSS ile ebeveyn element seçilebilir mi?

Evet, güncel Chrome, Firefox ve Safari'de desteklenen :has() sözde sınıfıyla. li:has(> a.active), doğrudan aktif bir link içeren liste öğeleriyle eşleşir.

İlgili kavramlar