CSS’te stil verirken sadece HTML elementlerini değil, aynı zamanda belirli durumları ve belirli kısımları da seçebilmemiz gerekir. İşte burada pseudo sınıflar (pseudo-classes) ve pseudo elemanlar (pseudo-elements) devreye girer. Çoğu kişi bu iki terimi birbirine karıştırır ama aslında farklı işlevlere sahiptirler. Bu makalede, pseudo sınıflar ve pseudo elemanları öğrenerek, CSS kodlarınıza nasıl daha fazla kontrol sağlayabileceğinizi keşfedeceksiniz.
Pseudo Sınıflar Nedir?
Pseudo sınıflar, bir elementin belirli bir durumunu veya etkileşimini hedef alarak seçmemizi sağlar. Örneğin, bir bağlantının ziyaret edildiğinde rengini değiştirmek istiyorsak :visited pseudo sınıfını kullanırız. Başlıca pseudo sınıflar şunlardır:
:visited → Daha önce ziyaret edilmiş bağlantılara uygulanır.
a:visited {
color: purple;
}
Bu kod, ziyaret edilen bağlantıların rengini mor yapar.
:active → Kullanıcı bir butona veya bağlantıya tıkladığında uygulanır.
a:active {
color: red;
}
Bu kod, bağlantıya tıklandığında rengini kırmızı yapar.
:nth-of-type(n) → Aynı türden belirli bir öğeyi seçer.
p:nth-of-type(2) {
font-weight: bold;
}
Bu kod, ikinci paragrafın yazı tipini kalın yapar.
:disabled → Form elemanlarının devre dışı durumuna uygulanır.
input:disabled {
background-color: gray;
color: white;
}
Bu kod, devre dışı bırakılmış input alanlarının arka plan rengini gri, yazı rengini beyaz yapar.
Bu sınıflar sayesinde, kullanıcıların sayfanızla etkileşimini daha sezgisel hale getirebilirsiniz.
Pseudo Elemanlar Nedir?
Pseudo elemanlar, bir elementin belirli bir kısmını seçmek için kullanılır. Yani, pseudo sınıflar gibi tüm elementin durumunu değil, elementin belli bir bölümünü hedef alırlar. CSS’te pseudo elemanları tanımlamak için genellikle iki tane :: (çift iki nokta üst üste) kullanılır. Ancak, bazı tarayıcılar tek : (tek nokta üst üste) ile de destekler.
Başlıca pseudo elemanlar şunlardır:
1. ::first-letter – İlk Harfi Biçimlendirme
Bir metin bloğunun ilk harfini özel olarak biçimlendirmek için ::first-letter kullanabiliriz. Özellikle hikaye ve haber içeriklerinde büyük harfli başlangıçlar yapmak için idealdir.
Örnek:
p::first-letter {
font-size: 2.5rem;
font-weight: bold;
color: navy;
}
Bu kod, tüm <p> etiketleri içindeki ilk harfi lacivert, büyük ve kalın yapar.
2. ::first-line – İlk Satırı Biçimlendirme
Bir paragrafın sadece ilk satırını özel olarak biçimlendirmek isterseniz ::first-line kullanabilirsiniz.
Örnek:
p::first-line {
color: green;
text-transform: uppercase;
}
Bu kod sayesinde, paragrafların ilk satırı yeşil ve büyük harfli hale gelir.
3. ::selection – Seçili Metnin Stilini Değiştirme
Kullanıcı bir metni fareyle seçtiğinde (highlight yaptığında) seçili alanın arka plan rengini ve yazı rengini değiştirmek için ::selection pseudo elemanını kullanabiliriz.
Örnek:
::selection {
background-color: lightblue;
color: white;
}
Bu kod, seçilen metnin arka planını açık mavi, metin rengini beyaz yapar. Böylece kullanıcı, metni seçtiğinde özel bir görsel etki oluşur.
4. ::before ve ::after – Elementlere İçerik Eklemek
Bazı durumlarda HTML kodunu değiştirmeden bir elementin başına veya sonuna özel içerikler eklemek isteyebiliriz. İşte bu durumda ::before ve ::after kullanabiliriz.
Örnek:
h3::before {
content: "Önemli: ";
}
Bu kod, tüm <h3> başlıklarının önüne “Önemli:” metnini ekler.
Benzer şekilde:
h3::after {
content: " [Daha Fazla Oku]";
}
Bu kod, tüm <h3> başlıklarının sonuna “[Daha Fazla Oku]” metnini ekler.
Bunlar, özellikle uyarı mesajlarına ek bilgiler ekleme, alıntıları süsleme veya menü öğelerine açıklamalar ekleme gibi durumlarda oldukça faydalıdır.
Pseudo Sınıflar ile Pseudo Elemanların Farkı
| Pseudo Sınıflar | Pseudo Elemanlar |
|---|
| Bir elementin durumunu seçer | Bir elementin bölümünü seçer |
: ile tanımlanır (örn: :visited) | :: ile tanımlanır (örn: ::first-letter) |
| Kullanıcı etkileşimine bağlı olabilir | Doğrudan CSS ile belirli alanlara uygulanır |
Örnek: :focus, :nth-of-type(3) | Örnek: ::first-letter, ::after |
Sonuç
Pseudo sınıflar ve pseudo elemanlar, CSS’in sunduğu güçlü özelliklerden bazılarıdır. Pseudo sınıflar bir elementin belirli bir durumunu, pseudo elemanlar ise elementin belirli bir kısmını hedef alır.
Yeni başlayanlar için ::first-letter, ::first-line ve ::selection gibi pseudo elemanlar oldukça kullanışlıdır. Daha ileri seviye CSS kullanımı için ::before ve ::after gibi özelliklerle sayfanızı daha dinamik hale getirebilirsiniz.
Bu bilgileri öğrendikten sonra, kendi projelerinizde pseudo sınıflar ve pseudo elemanları deneyerek CSS’in sunduğu esnekliği keşfetmeye devam edebilirsiniz!