CSS’te Pseudo Seçicileri Kullanımı (Sözde Sınıflar ve Elementler)

Mayıs 2019
YouTube'ta Takip Et:

CSS’in bilmeniz gereken özelliklerinden biri Pseudo Classes (Pseudo Sözde Sınıfları) ve Pseudo Elements (Pseudo Elementleri) kavramıdır. Bir paragrafın ilk harfine ya da ilk satırına ulaşmak, bir linkin ziyaret edildiğinde ya da edilmediğinde farklı renklerin görünmesi, bir form alanında seçili olan imput’un dış rengine ulaşmak gibi güzel, faydalı özellikleri bulunur. Daha iyi öğrenmek için aşağıdaki örnekleri mutlaka kurcalayın.

Sitenizde başka bir sayfaya ya da siteye link verdiğinizde bir link rengi belirir. Bu bağlantı renginin bazı alt parametreleri var. Standart link rengi, önceden ziyaret edilen link rengi, fare imleci üzerine geldiğinde değişen link rengi ve fare tıklandığında oluşan link rengi. Bu renklerin her birini ayarlayabiliyorsunuz.

Buradaki hover’ın kullanım alanı oldukça fazla. Her div:hover, img:hover şeklinde kullanımlarla sayfanıza güzel görüntü kazandırabilirsiniz.

:first-child Kullanımı

HTML kodları arasında belirtilen ilk HTML kodunu kap anlamına geliyor. Örneğin; div p:first-child ile div etiketinin altındaki tüm p etiketlerini hedeflemek yerine sadece ilk p etiketini hedefliyoruz.

:last-child Kullanımı

Son HTML kodunu kapmak için kullanılıyor. Menülerde padding verdiğimiz zaman en sondaki menü nesnesinin o padding’lerden etkilenmemesini isteyebiliyoruz.

:first-letter Kullanımı

Ansiklopedilerde ya da bazı blog sayfalarında ya da haber sitelerinde içeriğin ilk harfinin diğerlerinden farklı büyüklükte olduğunu görmüşsünüzdür. first-letter da paragrafın ilk harfini değiştirmek için kullanılır.

:first-line Kullanımı

first-line da bir metnin ilk satırını yakalamak için kullanılıyor. Paragrafın ilk satırını diğer yazılardan daha kalın yapmak isteyebilirsiniz.

:before ve :after Kullanımı

CSS’in önemli seçicilerinden ikisi de before ve after’dır. Öncesi ve sonrasına anlamına gelen bu özellik ile nesnenin öncesine ya da sonrasına eklemeler yapabiliyorsunuz. Mesela dikey menülerde menü elemanlarının başına küçük bir ok koymak isteyebilirsiniz. Ul li etiketiyle listelenmiş listelerdeki elemanların her birinin sağına bir çizgi koymak, para birimi eklemek gibi özellikleri isteyebilirsiniz. Bunları hep bu sözde sınıflarla yapıyoruz.

Burada content içine yazılacak şeyler li’nin öncesinde veya sonrasında görünecektir. Örnekleri biraz daha kapsamlı hale getirirsek imaj ekleme, ikon ekleme veya karakter eklemek de aşağıdaki gibidir.

Gözden kaçırdığım veya eklemek istediğiniz bir şey olursa yorum kısmına yazabilirsiniz.