CSS Sözde Sınıf (Pseudo) Seçiciler Nedir?
CSS sözde sınıf (Pseudo) CSS’i destekleyen web tarayıcıları tarafından otomatik olarak tanınan özel sınıflardır. Sözde denmesinin nedeni normal HTML hiyerarşisi içinde bu sınıf elemanların bulunmamasındandır. Bu sınıf ve elemanlar (X)HTML hiyerarşisi ile erişemediğimiz eleman ve sınıflara erişmemizi sağlar.
Sözde (Pseudo) sınıf; bir elemanı farklı sınıflara böler. (örn: link elemanını active, visited vb. sınıflarına böler.)
Şimdi sözde sınıf türlerini inceleyelim.
Sözde Link Sınıfı
Sadece linklere uygulanan iki sözde link sınıfı vardır. Bunlar; :link ve :visited sınıflarıdır.
:link – Ziyaret edilmemiş sayfanın linkine stil tanımlaması yapmak için kullanılır. Ancak birçok web tarayıcısı yapılan stil tanımlarını ziyaret edilmiş sayfa linklerine de uygular.
:visited – Ziyaret edilmiş sayfa linklerine stil tanımlaması yapmak için kullanılır.
Standart kullanım şekli aşağıda görüldüğü gibidir.
a:link {color: blue}
a:visited {color: red}
Şimdi bir örnek ile pekiştirelim.
<html>
<head>
<title>CSS'in yapısı</title>
<style type="text/css">
a {
color: blue;
}
a:visited {
color: red;
text-decoration: line-through;
}
</style>
</head>
<body>
<p><a href="http://www.google.com" title="Google seç">gooogle </a></p>
<p><a href="http://www.yahoo.com" title="Yahoo seç">yahoo </a></p>
<p><a href="http://www.fatihhayrioglu.com" title="Fatih">fatih </a></p>
</body>
</html>
Sözde Dinamik Sınıfı
Sözde dinamik sınıfları sayfa görünümüne çok büyük katkılar yapabilir.
Bu sınıflar genelde linklere uygulanır ancak birçok kullanım alanları vardır. Bunlar; :focus, :active ve :hover sınıflarıdır.
:focus – Odaklanan elemana stil tanımlaması yapmak için kullanılır.
:active – Aktif olan elemana stil atamak için kullanılır.
:hover – Bir elemanın üzerine Farenin imleci geldiğinde yapılacak tanımlama için kullanılabilir.
Standart kullanım şekli aşağıda görüldüğü gibidir.
a:hover {color: red;}
a:active {color: yellow;}
input:focus {border: solid 1px;}
Bir örnek ile pekiştirelim.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS'in yapısı</title>
<style type="text/css">
input:focus {
border: solid 5px;
}
a:hover {
color: red;
}
a:active {
color: yellow;
}
</style>
</head>
<body>
<input type=”text”>
<p><a href="http://www.google.com" title="Google">Gooogle</a></p>
<p><a href="http://www.yahoo.com" title="Yahoo">Yahoo</a></p>
<p><a href="http://www.yandex.com" title="Yandex”>Yandex</a> </p>
</body>
</html>
Yukarıdaki kodu yazıp çalıştırdığınızda, yazı alanına tıklarsanız focus sınıfı ile çerçeve oluşturacak, linklerin üzerine gelince hover sınıfı ile yazı rengi kırmızı olacak ve linklere tıklandığı zaman active sınıfı ile yazı rengi sarı olacaktır.
Sözde Çocuk Eleman Sınıfı
Diğer bir sözde sınıfımız çocuk elemanlara tanınan sözde sınıflardır.
:first-child – Belirtilen elemanın ilk çocuk elemanı olması durumunda uygulanacak stil ataması içi kullanılır.
:last-child – Belirtilen elemanın son çocuk elemanı olması durumunda uygulanacak stil ataması içi kullanılır.
:first-of-type – Belirtilen elemanın çocuk elemanlar içinde o elemandaki ilk çocuk olması durumunda uygulanacak stil ataması içi kullanılır.
:last-of-type – Belirtilen elemanın çocuk elemanlar içinde o elemandaki son çocuk elemanı olması durumunda uygulanacak stil ataması içi kullanılır.
:only-child – Belirtilen elemanın kendinden başka çocuk eleman olmaması durumunda uygulanacak stil ataması içi kullanılır.
:only-type – Belirtilen elemanın çocuk elemanlar içinde o türdeki tek çocuk elemanı olması durumunda uygulanacak stil ataması içi kullanılır.
:nth-child(istenilen sayı) – Belirtilen elemanın kendi türleri içinde belirtilen sıradaki eleman olması durumunda uygulanacak stil ataması için kullanılır.
:nth-child(odd) – Belirtilen elemanın kendi türleri içinde tek sıradaki eleman olması durumunda uygulanacak stil ataması için kullanılır.
:nth-child(even) – Belirtilen elemanın kendi türleri içinde çift sıradaki eleman olması durumunda uygulanacak stil ataması için kullanılır.
Yukarıdaki sözde sınıflardan bazılarını kullanarak bir örnek yapalım.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>CSS'in yapısı</title>
<style type="text/css">
p:first-child {
font-weight: bold;
}
p:last-child {
color:red;
}
li:nth-child(odd) {
background-color:yellow;
}
li:nth-child(even) {
background-color:pink;
}
</style>
</head>
<body>
<p>Bu paragraf ilk çocuk elemanıdır.</p>
<ul>
<li>1.sıra (tek)</li>
<li>2.sıra (çift)</li>
<li>3.sıra (tek)</li>
<li>4.sıra (çift)</li>
</ul>
<p>Bu paragraf son çocuk elemandır.</p>
</body>
</html>
Yukarıdaki kodun ekran çıktısı aşağıdaki gibi olacaktır.
CSS sözde sınıf (pseudo) konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/css/
Sosyal Medya Hesaplarımız
