Merhaba,

Daha önceki yazılarda 3 tip CSS seçici öğrenmiştik. Bunlar;

  • generic, yani doğrudan html etiketini hedeflediğimiz seçiciler. Örnek olarak sayfadaki <p> etiketlerini seçmek için doğrudan p{ } şeklinde yazıyoruz.
  • sınıflar, yani belirli bir stil sınıfın hedeflediğimiz seçiciler. Örnek olarak sayfadaki class="ornek" özelliğine sahip öğeleri seçmek için .ornek{ } şeklinde yazıyoruz.
  • idler, yani sayfadaki belirli tek bir öğeyi hedeflemek için bir id atayarak hedeflediğimiz seçiciler. Örnek olarak sayfadaki id="logo" özelliğine sahip yegane öğeyi seçmek için #logo{ } şeklinde yazıyoruz.

Tüm bu seçiciler pseudo sınıfları ile ilişkilendirilebilir. Bu pseudo sınıfları;

  • İlgili öğenin belirli bir durumunu tanımlar.
  • Ve pseudo sınıfı : (iki nokta işareti) ile yazılır.

Syntax (Söz Dizimi)

pseudo sınıfları kendi başlarına var olamazlar. Bir seçici ile ilişkilendirilmeleri gerekir.

Söz dizimi şunun gibidir:

.secici:pseudo-sinifi{ }

Birbirlerine bağlı olduklarını ifade edebilmek için seçici ve pseudo sınıf tanımlayıcı arasında boşluk bulunmaz.

:hover

Örnek olarak, kullanılan ortak bir pseudo sınıfı :hover, hedeflenen öğe üzerine mouse ile gelindiğinde bir CSS stili uygular. Linkler üzerinde test edelim.

<p>Tüm blog yazılarıma <a href="https://www.oktetik.com">buraya tıklayarak</a> ulaşabilirsiniz.</p<

CSS:

a{ color: blue; }
a:hover{ color: red; }

Burada linklerimize yani <a> etiketimize mavi rengi tanımladık. :hover pseudo sınıfı ile de mouse ile üzerine gelince kırmızı renkte görünmesini sağladık.

hover önizleme

İkinci satır da aynı HTML öğesini (<a>) hedefler, ancak yalnızca belirli bir durum gerçekleştirildiğinde. (Örneğimizde mouse ile üzerine gelindiğinde.)

:visited

Bir başka pseudo sınıfı olan :visited , tıklanmış ve tıklanmamış linkleri ayırt edebilmeye yarar. :visited ile atadığımız stiller, ziyaret edilmiş linkler için geçerli olacaktır.

<a href="https://www.google.com">Google</a>
<a href="https://www.oktetik.com">Oktetik</a>
<a href="https://www.facebook.com">Facebook</a>
<a href="https://www.twitter.com">Twitter</a>
<a href="https://marksheet.io">MarkSheet</a>

Burada 5 adet linkimiz mevcut. Şimdi CSS ile :visited pseudo sınıfı atayalım.

a{ color: dodgerblue; }
a:visited{ color: rebeccapurple; }

Görünümü:

css. visited

Görüldüğü gibi, daha önce ziyaret edilmiş olan Google, Oktetik, Facebook ve Marksheet web siteleri tanımlandığı gibi mor renkte görünürken, Twitter linki ziyaret edilmediği için mavi renktedir. Ziyaretçilerinizin web sitenizi tararken hangi linklere zaten bakmış olduğunu gösterebilmek adına kullanılabilir.

:focus

Bu pseudo sınıfı, ilgili öğeye odaklanıldığı zaman kullanılır. Bu HTML <input> etiketleri için oldukça kullanışlıdır.

HTML:

<input type="text" class="form-input" placeholder="Adınızı yazın">

CSS:

.form-input{ border: 2px solid grey; padding: 5px;}
.form-input:focus{ background: lightyellow; border-color: blue; outline: none;}

Görünümü:

Görselde gördüğünüz gibi, form input alanımızın üzerine gelindiğinde bir değişiklik olmuyor ancak üzerine tıkladığımızda ona odaklanma olduğu için :focus pseudo sınıfımız devreye giriyor ve arkaplan rengi sarı, çerçevesi mavi oluyor.

:first-child ve :last-child

Bu pseudo sınıfı HTML Hiyerarşisi ile ilgilidir. HTML öğelerini kodda göründükleri sıraya göre hedeflerler.

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

CSS:

li:first-child{ background: greenyellow; }
li:last-child{ background: lightsalmon; }

Görünümü:

Görüldüğü gibi HTML tarafımızda arkaplan rengi değişen ilk ve son öğelerimize herhangi bir ID veya class tanımlaması yapmadık. CSS’de hedeflememizi hiyerarşik sıralarına göre ilk ve son sırada olmalarına göre yaptık. Eğer en sona beşinci bir öğe eklersek, somon renginde arkaplana şu anda sahip olan dördüncü öğe değil, son sırada yeni eklediğimiz öğe olacağı için yeni eklediğimiz öğe sahip olurdu.

:nth-child

Eğer ilk veya son öğeyi değil de, ikinci, üçüncü veya herhangi bir sıradaki öğeyi hedeflemek isteseydik o zaman :nth-child pseudo sınıfımız yardımcı olacaktı. Az önceki HTML yapımızın  CSS ini değiştirelim ve şu şekilde yapalım:

li:nth-child(2){ background: violet; }

Yeni Görünümü:

Tek ve Çift ( odd ve even )

Şimdi de listedeki tek ve çift değerleri hedefleyelim. Bu sefer de kullanmamız gereken şekil tek sıradakiler için :nth-child(odd) çift sıradakiler için :nth-child(even) olacaktı. Aynı HTML üzerinde CSSimizi güncelleyelim:

li:nth-child(odd){ background: gold;}

Görünümü:

:nth-child(odd) kullanarak tek sıradaki yani örneğimizdeki birinci ve üçüncü öğeyi hedefledik. Öğe eklemeye devam  edersek de eklediğimiz tek sıralı öğeler yine bu CSS’den etkilenecekti.

n yineleyici

Bu sefer de n ve katları olarak düşünelim. Mesela her 3. öğeyi hedeflediğimizde 3,6,9,12…. şeklinde 3’ün katlarındaki sırada bulunan öğeleri hedefleriz. HTML örneğimizi 10’a kadar uzatıp görelim:

<ul>
  <li>Bir</li>
  <li>İki</li>
  <li>Üç</li>
  <li>Dört</li>
  <li>Beş</li>
  <li>Altı</li>
  <li>Yedi</li>
  <li>Sekiz</li>
  <li>Dokuz</li>
  <li>On</li>
</ul>

CSS:

li:nth-child(3n){ background: hotpink; }

Görünümü:

 Burada bilmemiz gereken bir detay saymaya sıfırdan başlanacağıdır. Yani ilk n 0 değeri alır. 3n dediğimiz de 3×0 = 0. öğe 3×1 = 3. öğe 3×2 = 6. öğe şeklinde devam eder. Bu  bilgi diğer pseudo sınıflarında işimize yarayacak.

n + 1

İlk öğe ile birlikte sonrasında 3er 3er artırarak sıraları seçmek isteseydik nasıl yapacaktık?

li:nth-child(3n+1){ background: limegreen; }

Görünümü:

Burada 3n+1 şeklinde kullanarak 3×0 + 1 = 1. öğe , 3×1 + 1 = 4. öğe , 3×2 + 1 = 6. öğe , 3×3 +1 = 10. öğe şeklinde seçimlerimizi yaptık.

nth-child kullanarak dilediğimiz sıra artış şeklini kurgulamamız mümkün.