CSS Dersleri 27 - Pseudo-Classes (Sözde Sınıflar)

Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Pseudo-Clasess (Sözde Sınıflar) konusunu öğreneceğiz.

Sözde sınıflar nelerdir?

Sözde sınıf, bir etiketin özel durumunu tanımlamak için kullanılır. Örneğin, şu amaçlarla kullanılabilir:

Kullanıcı faresini üzerine getirdiğinde bir öğenin stilini belirlemede
Ziyaret edilmiş veya edilmemiş bağlantıları ayırt etmede
Bir etikete tıklanıldığı anda ki stilini belirlemede

Pseudo-Clasess Kullanımı

Sözde sınıfların sözdizimi şu şekildedir ;

secici:sozde-sinif {
  ozellik:değer;
}

Çapa (Anchor) Sözde sınıfları

Bağlantılar farklı şekillerde görüntülenebilir:

/* ziyaret edilmemiş link */
a:link {
  color: red;
}

/* ziyaret edilmiş link */
a:visited {
  color: green;
}

/* fare üstüne gelinmiş link */
a:hover {
  color: hotpink;
}

/* tıklanılmış link */
a:active {
  color: blue;
}

Sözde sınıflar ve CSS Sınıfları

Sözde sınıflar CSS sınıflarıyla birleştirilebilir:Örnekteki bağlantının üzerine geldiğinizde rengi değişecektir:

a.highlight:hover {
  color: #ff0000;
}

Etiketlerde Hover Özelliği

Bir div etiketinde :hover sözde sınıfının kullanımına bir örnek:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}
</style>
</head>
<body>

<div>Benim üstüme gelirsen gizli p etiketini görürsün
  <p>Tada! Bak buradayım !</p>
</div>

</body>
</html>

CSS :first-child Sözde Sınıfı

:first-child sözde sınıfı, bir etiketin ilk çocuğu olan belirli bir etiketi seçmek için kullanılır.

İlk p etiketini seçmek

Aşağıdaki örnekte, seçici, herhangi bir etiketin ilk alt etiketi olan herhangi bir p etiketi ile eşleşir:

p:first-child {
  color: blue;
}

Tüm p etiketlerine ait ilk i etiketlerini seçmek

Aşağıdaki örnekte seçici, tüm < p > etiketlerinin ilk < i > etiketlerini seçer :

p i:first-child {
  color: blue;
}