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

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.

a:link {color: #0080ff;}
a:visited {color: #ff8040;}
a:hover {text-decoration: underline;}
a:active {color: #00c3ff;}

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.

div p:first-child {color:#000;}
div img:first-child {border-color:#000;}
div a:first-child {font-weight:bold;}

: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.

div p:last-child {padding-right:0;}

: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.

p.first-letter {font-size:20px;}

: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.

p:first-line {font-weight:bold;}

: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.

li:before {content:'';}
li:after {content:'';}

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.

a:before {background:url(imaj.jpg) 0 0 no-repeat;}

Popular Eğitimler

CSS Sprite Nasıl Yapılır?

İnternet standartlarının ve CSS’in gelişmesi, sağladığı kolaylıklar, programcılara özellikle hız ve düzen…

VS Code Live Server ve Live Server Web Extension

VS Code Live Server ile HTML ve CSS gibi statik sayfalarınızı, ister…

Hareketli Font Awesome İkonları

Font Awesome fontlarını kullanarak onlara hareket verebiliyoruz. Font Awesome’a hareket verirken JavaScript’in…

CSS ile Linklere Düz Çizgi Yerine Hareketli Dalgalı Çizgi

Linkler varsayılan olarak altı düz çizgili elemanlardır web sitelerinde. Kullanıcının ilgisini çekmesi…

Web Sitesine Dark Mode / Gece Modu Nasıl Eklenir?

Karanlık modlar göz yormayan görünümüyle hayatımızın her alanına giriyor. YouTube, Whatsapp, Android,…

Google PageSpeed’de Web Yazı Tipi Yüklemesi Hatası Çözümü

Web sitenizi Google PageSpeed’de test ederken karşılaşılan sorunlardan biri yazı tipi yüklemesi…