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.