Anasayfa / Web Tasarım / Css / CSS Temel Yapısı ve Nitelik Seçicileri 2. Kısım (Ders 3)

CSS Temel Yapısı ve Nitelik Seçicileri 2. Kısım (Ders 3)

Bir önceki dersimizde nitelik seçicilerinin bazılarını görmüştük bu dersimizde kalan seçicilerimizi göreceğiz. Bu yazımızda bahsedeceğimiz seçiciler 2’ye ayrılıyor. Bunların ilki etkilediği etiketlerin birbirlerine göre olan konumlarına göre isimlendirilecekir. Bu seçiciler yazılan son elemanı etkileyecektir. İkinci grup ise sözde(Pseudo) seçicilerdir. Bu seçicilerin ilk grubu şöyledir:

  • Genel Kardeş Seçicisi

Genel kardeş seçicileri belirtilen iki html elemanın art arda ve aynı düzeyde olması durumunda yazılan son elemanı etkiler. ÖRNEK:

...
   <style>
      h1~p{
         color: red;
      }
   </style> 
...
   <h1>Başlık</h1>
   <p>Seçici tarafından rengi kırmızı olarak değiştirilen paragraf</p>
...

Yazımızın başında bahsettiğimiz gibi ilk grupta bulunan seçiciler elemanların birbirlerine olan konumlarına göre etkilenecektir. Yukarıdaki örneğimizde de görüldüğü gibi aynı düzeyde olan elemanlar kardeş eleman olarak sayılmaktadır. Kardeşliğin tanımlaması birbirlerini kapsamayan ve aynı eleman tarafından kapsanan veya hiç kapsanmayan elemanlardır. Bir örnek daha vermek gerekirse <head> ve <body> elemanları kardeştir. Çünkü birbirlerini kapsamıyorlar ve ikisini de kapsayan elemanlar aynı(<html>).

  • Komşu Kardeş Seçicileri

Komşu kardeş seçicilerinde html elemanlarının birbirleini art arda takip etmeleri gerekmektedir. İkinci yazılan elemanı etkilemektedir. Genel kardeş seçicilerinden farkı şudur: Genel kardeş seçicilerinde elemanlar arasına başka elemanlar gelse bile seçici çalışır; ancak komşu kardeş seçicisinde hem komşu(art arda yazılmış olması) hemde kardeş olması şartı aranır. Örnek:

...
   <style>
      tr+td+td{
         background-color: blue;
      }
...
   <tr>
      <td>1. sütun</td>
      <td>2. sütun</td>
      <td>3. sütun</td>
      <td>4. sütun</td>
   </tr>
...

Yukarıdaki örnekte komşu kardeş seçicisi tarafından seçilen eleman içerisinde “3. sütun” yazan <td> elemanıdır.

  • Çocuk Seçicisi

Çocuk seçicisinde birinci elemanın ikinci elemanı kapsaması gerekir. ÖRNEK:

...
   <style>
      p>span{
         color: green;
      }
   </style>
...
   <p>
       İnsanlara merhamet etmeyene Allah(c.c)da merhamet etmez.<span>Hadis-i Şerif</span>
   </p>
...
  • Soydaş Seçicileri

Soydaş seçicisinde belirtilen ikinci elemanın birinci elemanın çocuğu veya torunu olması gerekmektedir.

...
   <style>
      li li{
         color: #0073AA;
      }
   </style>
...
   Yapılacaklar Listesi
   <ol>
      <li>Pazartesi
         <ul>
            <li>Mutfak Alışverişi</li>
         </ul>
      </li>
      <li>Salı</li>
      <li>Çarşamba</li>
      ...
   </ol>
  • Pseudo Seçicileri

Bu yazımın ikinci kısmına geldik. Pseudo seçiciler diğer seçici türleri ile de çalışabilmektedir. Yazılım şekilleri diğer seçicilerden biraz daha farklıdır. Bu seçiciler genelde etkileşim olması durumunu belirtirler. Bu seçiler aşağıdaki tabloda belirtilmiştir.

Pseudo SeçicisiÖrnekSeçici Özelliği
:activea:activeAktif olan linki seçer
:checkedinput:checkedİşaretlenmiş input elemanını seçer
:disabledinput:disabledDevre dışı bırakılmış input elemanını seçer.
:enabled input:enabled Etkin kılınmış input elemanını seçer
:empty h1:empty Çocuğu olmayan h1 elemanını seçer
:first-childp:first-childEbeveynlerinin ilk çocuğu olan p elemanını seçer
:first-of-typep:first-of-typeEbeveynlerinin ilk p çocuğunu seçer
:focusinput:focusOdak özelliğine sahip input elemanını seçer
:hovera:hoverİmlecin üzerine geldiği köprüleri seçer
:in-rangeinput:in-rangeBelirtilmiş aralıktaki input elemanlarını seçer
:invalidinput:invalidGeçersiz değere sahip input elemanlarını seçer
:lang(dil ismi)p:lang(tr)Tr dil parametresine sahip input elemanını seçer
:last-childp:last-childEbeveynlerinin son çocuğu olan p elemanını seçer
:last-of-typep:last-of-type Ebeveynlerinin son p çocuklarını seçer.
:linka:link Ziyaret edilmiş köprüleri seçer
:not(eleman):not(p)<p> olmayan bütün elemanları seçer.
:nth-child(sayı)p:nth-child(5)Ebeveynlerinin 5. p elemanlarını seçer
:nth-last-child(sayı) p:nth-last-child(3) Ebeveynlerinin sondan 3. p elemanlarını seçer
:nth-last-of-type(sayı)li:nth-last-of-type(4)Ebeveynlerinin 4. li çocuğunu seçer
:nth-of-type(sayı)li:nth-of-type (5)Ebeveynlerinin sondan 5. li çocuğunu seçer
:only-of-type p:only-of-type Ebeveynlerinin sadece kendisini içerdiği p öğelerini seçer
:only-childp:only-childEbeveynin sadece p öğesini içerediği p öğelerini seçer
:optionalinput:optionalOpsinyonel özelliğe sahip input elemanlarını seçer
:out-of-rangeinput:out-of-rangeBelirlenmiş aralığa sahip input değerlerini seçer
:read-onlyinput:read-onlyOkunur özelliğe sahip input elemanlarını seçer
:read-writeinput:read-writeSadece okunur özelliğe sahip olmayan input elemanlarını seçer
:requiredinput:requiredZorunlu özelliğe sahip input elemanlarının seçer
:rootrootDökümanın kaynağını seçer
:target#newsSadece aktif olan news elemanını seçer (çapa ismi taşıyan köprü üzerinden)
:validinput:validGeçerli özelliğine sahip olan input elemanını seçer
:visiteda:visitedZiyaret edilmiş köprü elemanlarını seçer
::afterp::afterHer <p> elemanından sonra bir içerik eklemesi yapar
::beforep::beforeHer <p> elemanından önce bir içerik eklemesi yapar
::first-letterp::first-letterHer <p> elemanının ilk harfini seçer
::first-linep::first-lineHer <p> elemanının ilk satırını seçer
::selectionp::selection<p> elemanının kullanıcı tarafından işaretlenen alanını seçer

Bir sonraki yazımızda görüşmek üzere…

Hakkında Furkan Yağmur

Check Also

web-gemisi

CSS’e Giriş (Ders 1)

CSS(Cascading Style Sheets) HTML sayfaları içine gömülebilen bir dildir. CSS dilinin ana amacı belirtilen etiketlerinin …

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir