CSS sözde pseudı sınıflar ve pseudo elementler olarak iki farklı şekilde inceleyeceğiz ve nerelerde hangi amaçlar ile kullanıldığını göreceğiz.
CSS Sözde elementler nedir ve kullanımı
Pseudo sınıf ve elementleri CSS’i destekleyen web tarayıcıları tarafından otomatik olarak tanınan özel sınıf ve elementlerdir. Bu sınıf ve elementler (x)html hiyerarşisi ile erişemediğimiz element ve sınıflara erişmemizi sağlar. Pseudo sınıfı bir elementi farklı sınıflara böler(örn: link elementini active, visited vd. sınıflarına böler) Pseudo elementi ise bir elementi alt kısımlara böler (örneğin bir paragrafın ilk harfi, bir paragrafın ilk satırı gibi.) Pseudo sınıfına örnek:
Syntax(Sözdizimi)
1 2 3 | seçici::pseudo-elmenti { özellik:değer; } |
pseudo elementlerin css sınıfları ile kullanımı
1 2 3 | seçici.sinif::pseudo-elementi { özellik:değer; } |
::first-line pseudo-element’i
Bu örneğimizde p etiketlerinin ilk satırına aşağıdaki özellikleri veriyoruz bu kodun sonucuna ise alttaki sonuç kısmından gözatabilirsiniz..
1 2 3 4 | p::first-line{ color: #ff0000; font-variant:small-caps; } |
Sonuç
::first-letter pseudo-elmenti
Bu pseudo elementi ile p etiketlerinin ilk karakteri farklı renk ve boyutta gösterilecek aşağıdaki sonuç kısmından görebilirsiniz.
1 2 3 4 | p::first-letter { color: #ff0000; font-size: xx-large; } |
Tüm pseudo sınfıları/elementleri
| Seçici | Örnek | Örnek Açıklaması |
|---|---|---|
| :link | a:link | Ziyaret edilmemiş linkler |
| :visited | a:visited | Ziyaret edilmiş linkler |
| :active | a:active | Aktif linktler |
| :hover | a:hover | Mouse ile üzerine gelindiğinde link’in durumu |
| :focus | input:focus | Odağın hangi input nesnesinde olduğunu yakalama |
| ::first-letter | p::first-letter | p elementlerinin ilk harfi |
| ::first-line | p::first-line | p elementlerinin ilk satırı |
| :first-child | p:first-child | p elementlerinden ilk p elementi |
| ::before | p::before | p element’inden önce eklenecek içerik |
| ::after | p::after | p elementinden s |
| :lang(language) | p:lang(it) | p elementleri içerisinden lang attribute’ü it ile başlayanlar |
Hocam üni okumayan geliştiricinin yol haritası nasıl olmalı lütfen söyler misiniz
Hangi alanda ilerlemek istediğine göre yol haritası değişir. Veritabanı, Web, Mobil, Desktop, Gömülü Sistemler, Veri Analitiği, Yapay Zeka, Robotik Sistemler, Görüntü İşleme, Oyun Geliştirme gibi daha aklıma gelmeyen bir çok yol haritası mevcut. Öncelikle gerçekten hangi alanda ilerlemek istediğine karar vermelisin. Eğer verdiysen belirlediğin alanlara göre çok güzel yol haritaları mevcut ve paylaşabilirim.
Hocam bunun daha kapsamlısı mevcut mudur. Yine de sağ ol . İşimi gördün.
Bu sayfadaki tanımlar belki daha yardımcı olabilir.
https://www.w3schools.com/css/css_pseudo_classes.asp