Merhabalar!
Uzun zamandır öğrenmek istediğim ama bir türlü vakit ayıramadığım bu üç sözde sınıfı(ya da pseudo-class’ı) birlikte öğrenelim dedim 🙂 Aldığım notları buraya da aktarıyorum, daha sonra bakmak ve hatırlamak benim için de güzel oluyor. Öyleyse başlayalım.
1- :where() Sözde Sınıfı:
Hemen küçük bir örnek ile başlayalım. Üç tane h etiketli başlığımız olduğunu varsayalım. Sırasıyla h1,h2 ve h3 başlıkları ve içlerinde de span etiketi içerisinde bir text barındıralım. Sayıları iki defa yazmamın sebebi çıktıdaki değişikliği daha iyi görebilmek içindi, siz de denemek isterseniz bu şekilde bakıp ayrıntıyı fark edebilirsiniz:
h etiketleri içinki span‘ları seçmek için eski yöntemi{yorum satırı içindeki alan} ve :where() sözde sınıfına ait kullanımı ise aşağıdaki görseldeki gibi:
Görüldüğü üzere uzun uzun yazmak yerine :where() sözde sınıfı ile bu şekilde kullanabiliyoruz. Aldığımız çıktıda, span içindeki yazılar aqua rengine dönerken span dışında kalanlarda herhangi bir değişiklik görmüyoruz.
2- :is() Sözde Sınıfı:
:is() ve :where() arasında tek bir fark var, :is() sözde sınıfı ondan önce yazılan özelliğin üzerine yazabiliyor. Aslında !important kullanımı gibi biraz. Örneğin yukarıdaki örnekte aqua rengi verdiğimiz bir :where() kullanımı var. Eğer yorum satırı açık olsaydı renkleri mavi görecektik. Çünkü :where() sözde sınıfının bir priority’si yok. Öncelik içermediği için kendisinden önce yazılan kodu ezemiyor. Fakat :is() sözde sınıfı öncelik içeriyor. Bu sebeple kendisinden önce hangi özellik yazılırsa yazılsın :is() sözde sınıfı kendi içerisinde belirtilen özelliği gösteriyor. Hemen örnekleyelim:
Aynı örnekte, bu sefer ilk etiketler yorum satırı içerisinde değil. :is() sözde sınıfını kullandık ve çıktıyı kırmızı renkte aldık çünkü :is() sözde sınıfı kendisinden önce yazılan kodu ezmiş oldu. :where() ile arasındaki fark bu, kullanımı ise tamamen aynı.
3- :has() Sözde Sınıfı:
:has() sözde sınıfı programlama dillerindeki if yapısı gibi biraz. Örneklersek daha rahat anlaşılacak. Alt alta iki div’imiz olduğunu varsayalım. Birinci div bir adet başlık içeriyor ama ikinci div başlık içermiyor.
Biz burada eğer başlık içeren div içerisinde işlem yapmak istersek :has() sözde sınıfını şöyle kullanabiliyoruz:
Bu durumda, iki div arasından h1 etiketine sahip olanı bulup sadece ona işlem yapıyor. Bence :has() oldukça ileri seviye kullanışlı bir sözde sınıf. Alışması biraz zaman alacak gibi ama ucu bucağı olmayan bir durum yaratıyor.
Tüm bu özellikleri tabii ki elementlere verdiğimiz ID ve Class’lar ile de kullanabildiğimizi unutmayalım 🙂
Daha ileri okuma yapmak isterseniz buraya, video ile öğrenmek isterseniz buraya göz atabilirsiniz.
Bir yanıt yazın