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;
}
