Merhaba.

CSS Eğitimlerimize Sözde Class ve Sözde Elementler ile devam ediyoruz bugün.

Pseudo yazılım dilinde sözde anlamında kullanılır. Sözde kodlar. Sözde sınıflar, elementler.

Pseudo sınıf ve elementleri CSS’i destekleyen tüm tarayıcılar otomatik olarak tanımlanırlar.

Bu element ve sınıflar HTML hiyerarşisi içinde ulaşamadığımız sınıf ve elementlere ulaşmamıza olanak sağlar.

Pseudo sınıfı bir elementi farklı sınıflara bölmenize yardım edecektir. Örneğin link elementini active, visited vb sınıflara bölebilirsiniz. Pseudo elementi ise bir elementi alt kısımlara böler. Örneğin bir paragrafın ilk harfi, ilk satırı gibi.

Pseudo Sınıfı Gösterimi

Pseudo Elementi Gösterimi

Not: Bir önceki derslerimizde class belirteçleri için nasıl isimlendirme yaptığımızı görmüştük. Pseudo class ve elementleri HTML de ayrıca sınıf ve element olarak belirtilmemiştir. Normal sınıflar ile beraber kullanılabilirler.

Aynı şekilde id seçicileri ile birliktede kullanılabilirler.

Pseudo Sınıflarını da ikiye ayırabiliriz. Link ve Dinamik olmak üzere. Şimdi gelin bunlara bakalım.

1.Link Pseudo Sınıfı

Yalnızca linklere uygulanan iki tane Pseudo sınıfı vardır. :link ve :visited. 

:link >> Ziyaret Edilmemiş linkin stil düzenlemesi için kullanılır.

:visited >> Ziyaret Edilmiş link stil düzenlemesi için kullanılır.

Dinamik Pseudo Sınıfları

Dinamik Pseudo sınıfları sayfa görünümüne büyük katkı sağlayabilirler. Genelde link ile beraber kullanılırlar ancak tek kullanım alanları bu değildir. 3 Tane dinamik pseudo sınıfı vardır. 

:focus

:active

:hover

Önemli bir olayı vardır Pseudo sınıflarının. Beraber kullanıldığında sıralamasına dikkat edilmelidir.

Genel Kullanımda

link-visited-hover-active sıralamarı ile kullanılmalıdır.

Tüm sınıflar içinse 

link-visited-focus-hover-active sıralamarı ile yapılmalıdır.

Bu sınıfları kısaca anlatmaya çalışayım.

:focus: Odaklanılan elemente stil tanımlaması yapmak için kullanılır. Örneğin input alanına içerik girerken.

:active: Aktif olan elemente stil tanımlaması yapmak için kullanılır. 

:hover: Farenin imleci bir elementin üzerine geldiğinde tetiklenecek stil tanımlamaları için kullanılır.

Bunları Uygulayalım

Görünüm denemelerini kendiniz yapabilirsiniz.

İlk Çocuk Elementi Seçmek

Bir başka Pseudo sınıfımız :first-child dır.

Belirtilen elementin ilk çocuk elementine stil atamak için kullanılır.

Lang Pseudo

:lang sınıfı ile belirtilen alandaki içeriğin istenilen dilde yazılması sağlanır.

Pseudo Sınıflarını Birleştirmek

Bir örnekle hemen konuyu açıkayalım. Mesela hover özelliğinin mouse imleci elementin üzerine gidince tetiklendiğini söylemiştik. Mesela ziyaret edilmiş bir link ile edilmemiş bir linkin üzerine gidildiğinde farklı stiller alsın dersek. İşte birden fazla sınıfı birleştirmemiz gerekecekti.

Sıralama önemli değildir.

Pseudo Element Seçicileri

Hayali elementler olarak bilinirler. 4 adet element vardır. 

::first-letter

::first-line

::before

::after

First-letter Elementi

Bir içeriğin ilk harfine stil atamak için kullanılır.

Link elementlerinin yanısıra başlangıcına :: iki tane iki nokta koyulduğu unutulmamalıdır.

First-letter

Belirtilen elementin ilk satırını stillendirmeye yardımcı olacaktır.

Before & After Elementleri

Bir elementin öncesine ve sonrasına bir içerik veya özellik eklemek için kullanılır. Notlarımızın başına otomatik olarak Not yazmak için kullanmak gibi.

şeklinde kullanmak yeterli gelecektir. Farklı elementlerle denemelerinizi yapabilirsiniz.

Bugünlük bu kadardı. Bir sonraki yazımda görüşmek üzere.