CSS :root , :target, :empty, :not() Pseudo Class’ları

:root Pseudo Class’ı

HTML belgesinin kök (HTML) elementine stil tanımlar.

:root pseudo class’ı örnek uygulaması.

Tarayıcıdaki görünüm.

Örnekte de gözlemleyebileceğiniz gibi root pseudo class’ı ile HTML belgemizin tamamına stil özellikleri tanımlayabiliriz. Bu örneğimizde HTML belgemize arkaplan ve yazı rengi ekledik.

:target Pseudo Class’ı

HTML elementine çapa türünde linkler ile bağlanmış ve tıklandığında hedeflenmiş olan elemente stil özellikleri uygular.

:target pseudo class’ı örnek uygulaması.

Tarayıcıdaki görünüm.

Örnekte bağlantıya tıkladığımızda hedef verdiğimiz eleman olan liste elemanlarımıza arkaplan ve yazı rengi stil özellikleri tanımlandı.

:empty Pseudo Class’ı

İçeriği tamamen boş olan HTML elementine stil özelliği tanımlamamızı sağlar.

:empty pseudo class’ı örnek uygulaması.

Tarayıcıdaki görünüm.

Örnekteki üç adet div elementinden ikinicisinin içeriği boş ve :empty pseudo class’ı ile bu elementimize kolaylıkla stil özelliği tanımlayabildik.

:not() Pseudo Class’ı

Parantez içerisinde belirtilen HTML elementi hariç diğer tüm elementlere stil özelliği tanımlar.

:not() pesudo class’ı örnek uygulaması.

Tarayıcıdaki görünüm.

:not() pseudo classında parantez içerisine p elementini yerleştirdiğimiz için p elementi hariç diğer elementlere belirtilen stil özellikleri tanımlandı. Ancak burada bir detayı belirtmek isterim, eğer p elementine öncesinde herhangi bir stil özelliği tanımlamamış olsaydık (yazı renginin yeşil olması gibi) not() classından etkilenmezdi ve tüm yazılar kırmızı olarak görüntülenirdi.