CSS'de İç içe selector (Descendant Selector) kullanılabilmektedir. Bir selector farklı selectorler içerisinde ise farklı stiller uygulanabilmektedir. A , B ve C selectorü aşağıdaki gibi tanımlansın :
A C { stiller1 ... }
B C [ stiller2 .... }
Yukarıdaki ifade şu anlama gelmektedir : C , A içerisinde ise stiller1 ile tanımlanan biçimler uygulanır. C , B içerisinde ise stiller2 ile tanımlanan stiller uygulanır. Bu şekilde aynı selector farklı konumlarına göre farklı bir biçimde gözükmesi sağlanabilmektedir.
CSS(Cascading Style Sheet) , HTML sayfasındaki elementlere ve elementlerin attribute'lerine (property) biçim vermek için kullanılmaktadır. Bu nedenle bir sayfadaki element hiyerarşisinde bulunmayan bir elemente veya bir elementin property (attribute) şeklinde tanımlanmamış bir özelliğine biçim vermek mümkün olmamaktadır. Örnek olarak bir elementin ilk satırı veya ilk paragrafı gibi bir kavram yoktur. Bir link'in üzerine gelindiğindeki biçim vermek içinde (hover deniyor) bir element veya property bulunmamaktadır. Bu tür durumlar için CSS içinde yalancı veya sözde element'ler ve class'lar tanımlanmıştır. Bu pseudo-elementler ve pseudo-class'lar aşağıdaki gibidir :
Aşağıda H3 ile olan tüm başlıkları kırmızı gösteren örnek görülmektedir :
<html> <head> <style> h3{ color:red; } </style> </head> <body> <h3>Bu başlık kırmızı olur</h3> <h4>Bu başlık kırmızı olmaz</h4> </body> </html>
head etiketi içerisinde style etiketi içinde H3 elementinin rengi kırmızı yapılıyor. Sayfa boyunca kullanılan tüm H3 elementlerinin rengi kırmızı olacaktır.
Aşağıda P elementi içinde farklı , H1 elementi içerisinde farklı biçimde görülecek i elementi örneği görülmektedir:
<html> <head> <style> p i{ color:red; } h1 i{ color:blue; } </style> </head> <body> <h4>buradaki yazıda <i>renk değişmeyecek</i> olacak</h4> <h1>buradaki yazıda <i>mavi</i> olacak</h1> <p>buradaki yazıda <i>kırmızı</i> olacak</p> </body> </html>
p i {} eğer i elementi p içerisinde ise anlamına gelmektedir. Aynı şekilde h1 i {} de i elementi h1 içerisinde anlamına gelmektedir. H4 içindeki i ile belirtilen yazının rengi varsayılan renk , h1 içindeki mavi ve p içindeki ise kırmızı olacaktır.
Aşağıda class selector (sınıf seçici) örneği görülmektedir :
<html> <head> <style> .redHead{ color:red; } .blueHead{ color:blue; } </style> </head> <body> <h3 class="redHead">bu başlık kırmızı olur</h3> <h1 class="blueHead">bu yazı mavi</h1> </body> </html>
Yukarıda redHead ve blueHead adında iki genel kullanım için sınıf tanımlanmıştır. Bu iki class istenilen elemente uygulanabilir.
Aşağıda ID selector (seçici) örneği görülmektedir :
<html> <head> <style> #redHead{ color:red; } #blueHead{ color:blue;
} </style> </head> <body> <h3 id="redHead">bu başlık kırmızı olur</h3> <h1 id="blueHead">bu yazı mavi</h1> </body> </html>
Yukarıda görüldüğü gibi redHead id'si olan H3'ün ve id'si blueHead olan h1 elementinin biçimi verilmiştir. redHead ve blueHead id'si sadece tek bir elemente verilebileceğinden bu stiller tek bir kere kullanılmış olurlar.
Aşağıda bir bağlantının fare ile üzerine gelindiğindeki biçiminin verildiği örnek görülmektedir:
<html> <head> <style> a:hover{ color:red; } </style> </head> <body> <a href="bilmemne.html">tıkla</a> </body> </html>
Yukarıdaki tıkla yazısı üzerine fare ile gelindiğinde yazının rengi kırmızı olacaktır. Bu :hover pseudo class'ı ile yapılmaktadır.
Aşağıda bir bağlantının , CSS pseudo class (pseudo sınıf) ile tüm biçimlerinini verildiği örnek görülmektedir.
<html> <head> <style> :link{ color:gray; } a:hover,a:visited:hover,a:active:hover{ color:red; } a:active{ color:green; } a:visited{ color:brown; } </style> </head> <body> <a href="bilmemne.html">tıkla</a> </body> </html>
Bağlantı gray (gri) rengi yapılmıtşrı. Aktif iken yeşil , daha önce ziyaret edilmiş ise kahverengi görülecektir. Tüm bağlantı durumlarında fare ile üzerine gelindiğinde renk kırmızı olacaktır. Yukarıdaki örnekte bağlantı ile ilgili tüm pseudo class'lar kullanılmıştır.
Aşağıda selector (seçici) önceliğini gösteren örnek görülmektedir :
<html> <head> <style> .mystyle{ color:blue; } p{ color:red; } </style> </head> <body> <p class="mystyle">buradaki yazı ne renk?</p> </body> </html>
Yukarıdaki örnekte yazı rengi mavi olacaktır. Class selector'ler daha önceliklidir. (Id selector ise class selector'e göre daha önceliklidir)