Birçok durumda web sitenizin bir öğesini CSS ile değiştirmek istersiniz, ancak bunu yapacağınız zaman, öğenin herhangi bir sınıfı veya tanımlayıcısı olmadığını fark edersiniz.
Endişelenme, her şey kaybolmadı.
PseudoClasses sayesinde hayal ettiğinizden çok daha fazlasını yapabiliriz ve bu eğitimde bunu nasıl yapacağımızı göreceğiz.
Bu eğitimde göreceğimiz her şey HTML ve CSS ile yaptığınız herhangi bir sayfa için çalışır.
Ve özellikle, elbette WordPress için geçerlidir, aslında bizim örneklerimizde bunu WordPress'te yapacağız.
📺️ Video Eğitimi:
Kanalıma abone ol:
:türünün ilki Yalnızca İlk Öğeyi Değiştir
Bu sözde sınıf, bir grup kardeş öğe arasında türünün yalnızca ilk öğesini değiştirmemize izin verir.
Şimdi somut örnekler göreceğiz ama burada bir yardımın var bu sözde sınıf hakkında çok iyi.
Değiştireceğimiz ilk şey, bir menünün ilk öğesidir:
Normalde bir şeyi değiştirmek istediğimde yaptığım şey, tarayıcımın öğe denetçisine girmek (sağ düğme -> İncele) ve değiştirilecek öğenin bir sınıfı veya tanımlayıcısı olup olmadığını kontrol etmektir:
Değiştirmek istediğim öğenin belirli bir tanımlayıcısı var, bu yüzden gerçekten sözde sınıfları kullanmama gerek yok.
Ama hayal edin ki siz gördünüz ve benim bir tanımlayıcısı olduğunu bilmiyorum 🙈
Bu öğeyi, o tanımlayıcı yokmuş gibi değiştireceğim.
Sözde sınıfları kullanmak için iki nokta üst üste gelen sözde sınıfı eklemeliyim:
#top-menu li:first-of-type {
margin-right: 140px;
}
Ve sonuç:
Yukarıdaki ekran görüntüsünde gördüğümüz gibi, sadece ilk elemana uygulanan sağ kenar boşluğu var.
:türünün sonuncusu Yalnızca Son Öğeyi Değiştir
Önceki örnekte olduğu gibi, yalnızca son öğeyi değiştirebiliriz.
Bu sefer :last-of-type'ı şu şekilde kullanacağız:
#top-menu li:last-of-type {
margin-right: 140px;
}
Ve sonuç şöyle olurdu:
:nth-of-type İstediğimiz Öğeyi veya Öğeleri Değiştirin
Bu sözde sınıf çok güçlüdür, çünkü istediğimiz herhangi bir özel öğeye başvurabiliriz veya birden çok öğenin seçilmesi için desenler oluşturabiliriz.
Menümün ikinci öğesini değiştirmem gerektiğini düşünelim, bunun için nth-of-type'ı şu şekilde kullanırdık:
#top-menu li:nth-of-type(2) {
margin-right: 140px;
}
Çift Öğelerde :nth-of-type ile desenler oluşturun
Belirli bir öğeye atıfta bulunmak yerine, her n öğede bir öğeye atıfta bulunmak istiyorsak, bunu şöyle yapardık:
#top-menu li:nth-of-type(2n) {
margin-right: 140px;
}
Ve Sonuç, ikinci ve dördüncü öğelere kenar boşluğu uygulamak olacaktır:
Odd Elements üzerinde :nth-of-type ile desenler oluşturun
Aynı şekilde tek öğelere de şu şekilde başvurabiliriz:
#top-menu li:nth-of-type(2n+1) {
margin-right: 140px;
}
Ve sonuç şöyle olurdu:
WordPress'e CSS Değişiklikleri Ekleyin
Öğe denetçisinde CSS değişiklikleri yapıyoruz. Bunu test etmek harika ama sayfayı yenilediğimizde değişiklikler kaybolacak çünkü bu değişiklikler web'e değil, kendi tarayıcımıza kaydediliyor.
Değişiklikleri WordPress'e eklemek için şablonumuzun CSS dosyasını değiştirmekten WordPress arayüzünün kendisini kullanmaya kadar birçok yol vardır.
WordPress arayüzünün kendisini kullanacağız, bunun için Özelleştir menüsüne gidiyoruz -> Ek CSS ekle:
Tıklıyoruz ve CSS'yi eklememiz gereken ekrana geliyoruz:
Bonus Parça: Bir Alt Öğeye Sözde Sınıf Ekleme
Gördüğümüz gibi, bu Sözde Sınıflar, kardeş elemanları, yani aynı seviyedeki elemanları kolayca değiştirmemizi sağlar.
Ancak menümüzün tuhaf öğelerinin rengini değiştirmek istediğimizi düşünelim.
Renk, liste öğesinde (li) tanımlanmaz, ancak liste öğesinin içindeki bağlantı öğesinde (a) tanımlanır:
Eleman denetçisine bakarsak:
Yakından bakarsak kalıbı şu şekilde oluşturamadığımızı görürüz:
#top-menu li a:nth-of-type(2n+1) {
color: red;
}
Her bağlantı farklı bir li'de olduğundan, hepsi ilk öğe olur ve hepsi renk değiştirir:
Yapmamız gereken, sözde sınıflı kalıbı li öğesine aşağıdaki şekilde uygulamaktır:
#top-menu li:nth-of-type(2n+1) a {
color: red;
}
Gerçekten istediğimiz şeyle sonuçlanan:
Gördüğümüz gibi, bir tanımlayıcımız veya sınıfımız yoksa dünyanın sonu değil.
Sahte sınıflar sayesinde HTML'mizin hemen hemen her öğesine erişebiliriz.
Umarım beğenmişsinizdir 😉