Yapısal Seçiciler

Bu dersin sonunda elemanları sırasına göre seçebilecek, bir koşulu dışarıda bırakabilecek ve içeriğine göre üst elemana stil verebileceksiniz.

Sıraya göre seçmek

Bir listenin ilk maddesini veya tablonun her ikinci satırını seçmek için her elemana sınıf yazmanız gerekmez. Yapısal seçiciler bunu kardeşler arasındaki sıraya bakarak yapar.

• :first-child Üst elemanın ilk çocuğu.
• :last-child Üst elemanın son çocuğu.
• :only-child Üst elemanın tek çocuğu.
• :nth-child(3) Üçüncü çocuk.
• :nth-last-child(2) Sondan ikinci çocuk.

<ul>
  <li>Bir</li>
  <li>İki</li>
  <li>Üç</li>
  <li>Dört</li>
</ul>

li:first-child {
  color: teal;
}

li:last-child {
  color: crimson;
}

li:nth-child(2) {
  font-weight: bold;
}

:nth-child formülleri

Parantezin içine bir sayıdan fazlası yazılabilir:

n sırasıyla 0, 1, 2… değerlerini alır ve 1’den küçük sonuçlar yok sayılır. 3n+1 için 1, 4, 7 çıkar.

En yaygın kullanımı satırları sırayla renklendirmektir. Değerleri değiştirip deneyin:

<table>
  <tr><td>Ali</td><td>90</td></tr>
  <tr><td>Ayşe</td><td>85</td></tr>
  <tr><td>Can</td><td>70</td></tr>
  <tr><td>Deniz</td><td>95</td></tr>
  <tr><td>Ece</td><td>80</td></tr>
</table>

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  padding: 8px;
}

tr:nth-child(even) {
  background-color: whitesmoke;
}

Tuzak: :first-child ve :first-of-type

p:first-child “ilk paragraf” demek değildir. “Üst elemanının ilk çocuğu olan paragraf” demektir. İlk çocuk bir başlıksa hiçbir paragraf seçilmez.

Türe göre saymak için -of-type kullanılır:

• :first-of-type Türünün ilki.
• :last-of-type Türünün sonuncusu.
• :nth-of-type(2) Türünün ikincisi.

<article>
  <h2>Başlık</h2>
  <p>İlk paragraf</p>
  <p>İkinci paragraf</p>
</article>

/* Bu kural çalışmaz, ilk çocuk h2 etiketidir */
p:first-child {
  color: crimson;
}

/* Bu kural ilk paragrafı bulur */
p:first-of-type {
  font-weight: bold;
}

:not: Hariç tutmak

:not() parantezin içindeki koşula uymayan elemanları seçer. Listelerde son madde hariç çizgi çekmek klasik bir kullanımıdır.

<ul class="liste">
  <li>Bir</li>
  <li>İki</li>
  <li>Üç</li>
</ul>

.liste {
  list-style-type: none;
  padding: 0;
}

.liste li {
  padding: 8px 0;
}

.liste li:not(:last-child) {
  border-bottom: 1px solid lightgray;
}

Özgüllük hesabında :not kendisi puan getirmez ama parantezinin içindeki seçicinin puanı sayılır.

:is ve :where: Kısaltmak

İkisi de parantezin içindeki herhangi bir seçiciye uyan elemanları seçer ve uzun listeleri kısaltır:

/* Uzun yazım */
article h1, article h2, article h3 {
  color: teal;
}

/* Aynı anlam */
article :is(h1, h2, h3) {
  color: teal;
}

Aralarındaki fark özgüllüktür. :is en güçlü içeriği kadar puan alır. :where ise hiç puan almaz, bu yüzden üzerine yazması en kolay seçimdir.

:has: İçeriğe göre seçmek

CSS’te uzun yıllar yalnızca aşağı doğru seçim yapılabiliyordu. :has() bunu değiştirdi: Bir elemanı içindekilere göre seçer. Modern tarayıcıların tamamı destekler.

<article class="kart">
  <h2>Resimli kart</h2>
  <img src="baldiyetapanadam.png" alt="Örnek resim" width="80">
</article>

<article class="kart">
  <h2>Resimsiz kart</h2>
</article>

<label class="secim">
  <input type="checkbox">
  Beni işaretleyin
</label>

.kart {
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid lightgray;
}

.kart:has(img) {
  background-color: lightyellow;
}

.secim:has(input:checked) {
  background-color: lightgreen;
}

Diğer yararlı seçiciler

• :empty Hiç içeriği olmayan eleman.
• :root Belgenin kökü, yani html elemanı. Değişkenler dersinde kullanacaksınız.

<style>
  li:nth-child(odd) {
    background-color: whitesmoke;
  }
</style>

<ul>
  <li>Bir</li>
  <li>İki</li>
  <li>Üç</li>
</ul>

<style>
  p:not(:last-child) {
    border-bottom: 1px solid gray;
  }
</style>

<div>
  <p>Birinci</p>
  <p>Son</p>
</div>

Bu derste öğrendikleriniz

• :first-child, :last-child ve :nth-child() kardeşler arasındaki sıraya bakar.
• -of-type seçicileri yalnızca aynı türdeki elemanları sayar.
• :not() bir koşulu dışarıda bırakır, :is() ve :where() listeleri kısaltır.
• :has() bir elemanı içindekilere göre seçer.