Seçicileri Birleştirmek

Bu dersin sonunda seçicileri birleştirerek sayfadaki elemanları tam olarak hedefleyebileceksiniz.

Şimdiye kadar bildikleriniz

CSS’e Köprü dersinde üç seçici gördünüz: etiket (p), sınıf (.uyari) ve id (#menu). Gerçek sayfalarda çoğu zaman daha fazlası gerekir. “Bütün bağlantılar” yerine “menünün içindeki bağlantılar” demek istersiniz.

Birden çok seçici: Virgül

Virgülle ayırdığınız seçicilerin hepsi aynı kuralı alır. Aynı bildirimleri tekrar yazmaktan kurtarır.

<h1>Ana başlık</h1>
<h2>Alt başlık</h2>
<p>Paragraf</p>

h1, h2 {
  color: teal;
  font-family: Georgia, serif;
}

Bir arada olma: Boşluksuz yazım

İki seçiciyi aralarında boşluk olmadan yazarsanız ikisine birden uyan elemanlar seçilir.

• p.uyari değeri uyari olan class niteliğine sahip paragraflar.
• .kart.vurgulu hem kart hem vurgulu sınıfına sahip elemanlar.

<p class="uyari">Paragraf ve uyarı</p>
<div class="uyari">Div ve uyarı</div>
<div class="kart">Yalnızca kart</div>
<div class="kart vurgulu">Kart ve vurgulu</div>

p.uyari {
  color: crimson;
}

.kart.vurgulu {
  background-color: gold;
}

İçinde olma: Boşluk

Boşluk “içinde” demektir. nav a bir nav elemanının içindeki bütün bağlantıları seçer. Bağlantı ne kadar derinde olursa olsun fark etmez.

Bir boşluk sonucu tamamen değiştirir: .kart.vurgulu tek bir eleman arar, .kart .vurgulu ise kartın içindeki vurgulu elemanı arar.

<nav>
  <ul>
    <li><a href="#">Menü bağlantısı</a></li>
  </ul>
</nav>
<p><a href="#">Metindeki bağlantı</a></p>

nav a {
  color: crimson;
  text-decoration: none;
}

Doğrudan alt eleman: >

> yalnızca bir seviye alttaki elemanları seçer. İç içe listelerde ve menülerde çok işe yarar.

<ul class="menu">
  <li>Birinci seviye
    <ul>
      <li>İkinci seviye</li>
    </ul>
  </li>
  <li>Birinci seviye</li>
</ul>

.menu > li {
  border-left: 4px solid teal;
  padding-left: 8px;
  margin-bottom: 8px;
}

Kardeşler: + ve ~

Aynı üst elemanın içindeki elemanlar kardeştir.

• h2 + p bir h2 etiketinden hemen sonra gelen paragrafı seçer.
• h2 ~ p bir h2 etiketinden sonra gelen bütün kardeş paragrafları seçer.

Yalnızca sonrakiler seçilir, önceki kardeşler seçilemez.

<p>Başlıktan önce (seçilmez)</p>
<h2>Başlık</h2>
<p>Hemen sonraki paragraf</p>
<p>Daha sonraki paragraf</p>

h2 + p {
  font-weight: bold;
}

h2 ~ p {
  color: teal;
}

Nitelik seçicileri

Köşeli parantezler elemanları niteliklerine göre seçer:

• [title] niteliğe sahip olan elemanlar.
• [type="text"] değeri tam olarak bu olanlar.
• [href^="https"] değeri bununla başlayanlar.
• [href$=".pdf"] değeri bununla bitenler.
• [href*="ornek"] değeri bunu içerenler.

<p><a href="https://ornek.com">Dış bağlantı</a></p>
<p><a href="dosya.pdf">PDF dosyası</a></p>
<p><a href="sayfa.html">İç bağlantı</a></p>
<input type="text" placeholder="Metin kutusu">
<input type="password" placeholder="Parola kutusu">

[href^="https"] {
  color: crimson;
}

[href$=".pdf"] {
  font-weight: bold;
}

input[type="text"] {
  border: 2px solid teal;
}

Seçicileri okumak

Tarayıcı seçicileri sağdan sola değerlendirir. Siz de karmaşık bir seçiciyle karşılaşınca en sağdan başlayın. nav ul > li a şöyle okunur: “Bir bağlantı, bir li içinde olan; o li, bir ul elemanının doğrudan altında olan; o ul, bir nav içinde olan.”

Seçicilerinizi olabildiğince kısa tutun. Uzun seçiciler HTML değişince bozulur. Çoğu durumda iyi adlandırılmış tek bir sınıf daha iyi bir çözümdür.

<style>
  nav a {
    color: crimson;
    text-decoration: none;
  }
</style>

<nav>
  <a href="#">Ana Sayfa</a>
</nav>

<style>
  h2 + p {
    font-weight: bold;
  }
</style>

<h2>Başlık</h2>
<p>Birinci</p>
<p>İkinci</p>

Bu derste öğrendikleriniz

• Virgül seçicileri listeler, boşluksuz yazım birden çok koşulu birleştirir.
• Boşluk “içinde”, > “doğrudan altında” demektir.
• + hemen sonraki, ~ sonraki bütün kardeşleri seçer.
• Nitelik seçicileri değere göre arama yapar: ^= başlar, $= biter, *= içerir.