CSS Sözde Sınıf (Pseudo-class)

CSS Sözde Sınıf (Pseudo-class) hakkındaki her şeyi bu yazımızda bulabilirsiniz.

CSS Şubat 20, 2022 0 3049 Okuma Listesine Ekle

CSS Sözde Sınıf (Pseudo-class)

Sözde sınıf, bir elemanın özel bir durumunu tanımlamak için kullanılır.

Örneğin, şu amaçlarla kullanılabilir:

Kullanıcının faresini üzerine getirdiğinde bir öğenin stilini değiştirebilir.
Ziyaret edilen ve ziyaret edilmeyen bağlantıların farklı şekillerde stilize edebilir.
Odaklandığında bir öğenin stilini belirleyebilir.

Sözdizimi

selector:pseudo-class {
  property: value;
}

Tutturucu Sözde Sınıflar (Anchor Pseudo-classes)

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

/* ziyaret edilmemiş bağlantı */
a:link {
  color: #FF0000;
}

/* ziyaret edilmiş bağlantı */
a:visited {
  color: #00FF00;
}

/* fare üzerindeyken bağlantı */
a:hover {
  color: #FF00FF;
}

/* seçili bağlantı */
a:active {
  color: #0000FF;
}

Not: a:hover, etkili olabilmesi için CSS tanımında a:link ve a:visited sonra GELMELİDİR! a:active'in etkili olabilmesi için CSS tanımında a: hover'dan sonra gelmesi ZORUNLUDUR! Sözde sınıf isimleri büyük / küçük harfe duyarlı değildir.

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

Eleman(:first-child) Sözde Sınıf

:first-child bir öğenin ilk çoçuğu (bölümü) belirtilen elemanı ile eşleşir.

Aşağıdaki örnekte, seçici, herhangi bir öğenin ilk çocuğu olan herhangi bir  öğesiyle eşleşir:

p:first-child {
  color: blue;
}

Aşağıdaki örnekte ise, seçici, tüm  öğelerindeki ilk  öğesiyle eşleşir:

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

Aşağıdaki örnekte ise, seçici,  öğelerindeki, başka bir öğenin ilk alt öğesi olan tüm  öğeleriyle eşleşir:

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

Eleman (:lang) Sözde Sınıfı

:lang farklı diller için özel kurallar tanımlarken kullanılır.

Aşağıdaki örnekte :lang, <q> öğeleri için tırnak işaretlerini lang="no" ile tanımlar:

<html>
<head>
<style>
q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>
<p>Metin <q lang="no">Bu bir alıntı metindir.</q> Metin</p>
</body>
</html>

Tüm Sözde Sınıflar

Seçici	Örnek	Örnek Açıklama
:active	a:active	Aktif bağlantıyı seçer.
:checked	input:checked	Kontrol edilen her <input> öğesini seçer.
:disabled	input:disabled	Devre dışı bırakılan her <input> öğesini seçer.
:empty	p:empty	Alt elemanı olmayan her <p> öğeyi seçer.
:enabled	input:enabled	Etkinleştirilmiş her <input> öğesini seçer.
:first-child	p:first-child	Her <p> elemanın ilk alt öğesini seçer.
:first-of-type	p:first-of-type	Üst öğesinin ilk <p> öğesi olan her <p> öğesini seçer.
:focus	input:focus	Odağı olan <input> öğesini seçer.
:hover	a:hover	Fareyle üzerine gelindiğinde bağlantıları seçer.
:in-range	input:in-range	Belirtilen aralıkta bir değere sahip <input> öğelerini seçer.
:invalid	input:invalid	Geçersiz değere sahip tüm <input> öğelerini seçer.
:lang(language)	p:lang(it)	"it" ile başlayan lang özellik değerine sahip her <p> öğesini seçer.
:last-child	p:last-child	Her <p> elemanının son alt öğesini seçer.
:last-of-type	p:last-of-type	Elemanın son öğesi olan her <p> öğesini seçer.
:link	a:link	Tüm ziyaret edilmeyen bağlantıları seçer.
:not(selector)	:not(p)	<p> öğesi olmayan her öğeyi seçer.
:nth-child(n)	p:nth-child(2)	Elemanın ikinci altında olan her <p> öğeyi seçer.
:nth-last-child(n)	p:nth-last-child(2)	En alttan sayarak, elemanın ikinci alt öğesi olan her <p>'yi seçer.
:nth-last-of-type(n)	p:nth-last-of-type(2)	Son alt öğeden sayarak, üst öğesinin ikinci <p> öğesi olan her <p> öğesini seçer.
:nth-of-type(n)	p:nth-of-type(2)	Üst öğesinin ikinci <p> öğesi olan her bir <p> öğesini seçer.
:only-of-type	p:only-of-type	Tek <p> öğesi olan, her <p> öğesini seçer.
:only-child	p:only-child	Elemanın bir altında olan her <p> öğesini seçer.
:optional	input:optional	"Gerekli" özniteliği olmayan <input> öğelerini seçer.
:out-of-range	input:out-of-range	Belirtilen aralığın dışında bir değere sahip <input> öğelerini seçer.
:read-only	input:read-only	Belirtilen "salt okunur" özelliğine sahip <input> öğelerini seçer.
:read-write	input:read-write	"Salt okunur" özelliği olmayan <input> öğelerini seçer.
:required	input:required	"Gerekli" özniteliği belirtilen <input> öğelerini seçer.
:root	root	Belgenin kök öğesini seçer.
:target	#news:target	Geçerli etkin #hedef öğesini seçer (bu bağlantı adını içeren bir URL'ye tıklandığında).
:valid	input:valid	Geçerli bir değere sahip tüm <input> öğelerini seçer.
:visited	a:visited	Ziyaret edilen tüm bağlantıları seçer.