CSS Pseudo-element (Sözde Element) Seçiciler

Pseudo, kelime anlamı ile sahte manasına gelmektedir. Bu nedenle aslında var olan bir elementin üzerinden türetilen CSS özellikleridir. Doğrudan HTML elementleri incelendiğinde sayfa içerisinde bulunan harici bir element değillerdir.

Pseudo-class (Sözde Sınıf) yapıları ile arasındaki en belirgin fark; Pseudo-class yapıları CSS'te ":" ile gösterilirken, Pseudo-element yapıları CSS'te "::" işareti ile gösterilmektedir.

Toplamda 7 farklı Pseudo-element yapısı bulunmaktadır. Bunlar: ::after, ::before, ::first-letter, ::first-line, ::marker, ::placeholder, ::selection şeklindedir.

1) CSS "::after" seçicisi nedir?

"after" kelime anlamı ile sonra manasına gelmektedir. Elimizde bulunan herhangi bir elementin sonraki durumunu temsil eder. Çok garip bir şekilde CSS özellikleri verilerek sanki bir HTML elementi gibi kullanılabilir.

<p></p>

p{
   width: 100px;
   height: 100px;
   background-color: white;
   position: relative;
}
p::after{
   position: absolute;
   content: '';
   right: -100px;
   width: 100px;
   height: 100px;
   background-color: orange;
}

Yukarıdaki örnekte "p" elementi seçilmiş ve "position:relative;" özelliği verilmiştir. Bu özellik sayesinde "::after" değeri sanki "p" elementinin içerisinde bulunan bir child (çocuk) element gibi davranmıştır. Ayrıca "content" özelliği mutlaka olmak zorundadır aksi takdirde yazılan kod ekranda gözükmeyecektir.

2) CSS "::before" seçicisi nedir?

"before" kelime anlamı ile önce manasına gelmektedir. Elimizde bulunan herhangi bir elementin önceki durumunu temsil eder. CSS özellikleri verilerek sanki bir HTML elementi gibi kullanılabilir.

<p></p>

p{
   width: 100px;
   height: 100px;
   background-color: white;
   position: relative;
}
p::before{
   position: absolute;
   content: '';
   left: -100px;
   width: 100px;
   height: 100px;
   background-color: blue;
}

Yukarıdaki örnekte "p" elementi seçilmiş ve "position:relative;" özelliği verilmiştir. Bu özellik sayesinde "::before" değeri sanki "p" elementinin içerisinde bulunan bir child (çocuk) element gibi davranmıştır. Ayrıca "content" özelliği mutlaka olmak zorundadır aksi takdirde yazılan kod ekranda gözükmeyecektir.

3) CSS "::first-letter" seçicisi nedir?

"first-letter" kelime anlamı ile ilk harf manasına gelmektedir. Elimizde bulunan herhangi bir elementin ilk harfini temsil eder. CSS özellikleri verilerek sanki bir HTML elementi gibi kullanılabilir.

<p>Lorem ipsum dolor sit amet.</p>

p::first-letter{
   font-size: 200%;
   color: red;
}

Yukarıdaki örnekte "p" elementi seçilmiş ve "::first-letter" değeri ile ilk harfi kırmızı ve büyük olarak gösterilmiştir.

4) CSS "::first-line" seçicisi nedir?

"first-line" kelime anlamı ile ilk satır manasına gelmektedir. Elimizde bulunan herhangi bir elementin ilk satırını temsil eder. CSS özellikleri verilerek sanki bir HTML elementi gibi kullanılabilir.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

p::first-line{
   font-weight: bold;
}

Yukarıdaki örnekte "p" elementi seçilmiş ve "::first-line" değeri ile ilk satır kalın olarak gösterilmiştir.

5) CSS "::marker" seçicisi nedir?

"marker" kelime anlamı ile işaretleyici manasına gelmektedir. Liste öğelerinin işaretleyicilerini temsil eder. CSS özellikleri verilerek sanki bir HTML elementi gibi kullanılabilir.

<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>

li::marker{
   color: red;
}

Yukarıdaki örnekte "li" öğeleri seçilmiş ve "::marker" değeri ile işaretleyiciler (list-style yapısı) kırmızı olarak gösterilmiştir.

6) CSS "::placeholder" seçicisi nedir?

"placeholder" kelime anlamı ile yer tutucu manasına gelmektedir. "placeholder" özniteliği belirtilen input öğelerini temsil eder. CSS ile özellikle verilerek sanki bir HTML elementi gibi kullanılabilir.

<input placeholder="Enter text...">

input::placeholder{
   color: gray;
}

Yukarıdaki örnekte "input" öğesi seçilmiş ve "::placeholder" değeri ile yer tutucu metin gri olarak gösterilmiştir.

7) CSS "::selection" seçicisi nedir?

"selection" kelime anlamı ile seçme manasına gelmektedir. Bir kullanıcı tarafından seçilen bir öğenin (mouse ile seçilme işlemi yapılma) bölümünü temsil eder. CSS ile özellikle verilerek sanki bir HTML elementi gibi kullanılabilir.

<p>Lorem ipsum dolor sit amet.</p>

p::selection{
   background: yellow;
}

Yukarıdaki örnekte "p" öğesi seçilmiş ve "::selection" değeri ile seçilen metin sarı arka plana sahip olmuştur.

CSS'te bulunan diğer seçim türlerini görüntülemek için CSS'te Seçim Yöntemleri isimli ana yazımıza bakmanızı tavsiye etmekteyiz.

Form Elementlerinin Özel Seçicileri

Form elementlerinin özel seçicileri, CSS ile form elemanlarını özelleştirmek için kullanılan yapılardır. Bu seçiciler "form" elemanlarından input, select ve textarea elementleri için ortak olarak bulunmaktadırlar.

1) CSS ":checked" seçicisi nedir?

":checked" seçicisi, bir form elemanının seçili (checked) durumunu hedef alır. Özellikle checkbox ve radio button gibi input elemanlarında kullanılır.

<form action="">
  <input type="radio" checked="checked" value="male" name="gender"> Male<br>
  <input type="radio" value="female" name="gender"> Female<br>
  <input type="checkbox" checked="checked" value="Bike"> I have a bike&...

CSS, Pseudo - Class (Sözde Sınıf) Seçiciler

Psudo, kelime anlamı ile "sahte" manasına gelmektedir. Bu nedenle aslında bu işlemler içerisinde yapmış olduğumuz seçim işlemleri, doğrudan elementin sahip olduğu değerler değil, olması beklenen değerlerdir. CSS, Pseudo - Class Seçicileri konusunun daha iyi anlaşılması için 6 farklı başlık altında bir yazım gerçekleştireceğiz. Bunlar; Genel Pseudo-class seçiciler, Form elemanlarına yönelik Pseudo-class seçiciler, Ebeveyn - Çocuk ilişkisine yönelik Pseudo-class seçiciler, Elemanın türüne yönelik Pseudo-class seçiciler, İçerik durumuna yönelik Pseudo-class seçiciler ve en son olarak Kök eleman seçici şeklindedir.

CSS Genel Pseudo-class seçiciler

En sık kullanılan Pseudo-class seçicileridir. Birden çok Genel Pseudo-class yapısı...