Selektorem może być dowolny element języka html, dla którego chcemy zdefiniować parametry formatowania. W zakeżności od sposobu odwoływania się do definicji reguły wyróżniamy nastepujące rodzaje selektów:
Selektory elementów to najczęściej sporykane selektory o składni:
selektor{właściwość:cecha;}
Selektor typu to podstawowy typ selektora np. :p,div,td{color:blue;}.
selektor uniwersalny (inaczej ogólny) to selektor pasujący do wszystkich znaczników. Ten selektor jest oznaczany *(gwiazdką). Np.: *{fpmt-family:tohoma;}.
przy uzyciu selektora potomka możemy formatować elementy wpisane w inny, leżący wyżej w hierarchi strony element. np. jeżeli w elemencie < h2>, znajduje się element < i>, to jest on potomkiem elementu < h2> i formatujemy go w/g wzoru: h2 i{właściwość:cecha;}
Selektor dziecka słóży do formatowania elementów znajdujących się o jeden rząd niżej w hierarchii drzewa dokumentu. Ma on postać rodzic > dziecko{właściwość:cecha;}
Selektor braci formatuje elementy na tym samym poziomie hierarchii, w/g wzoru: bart1 + bart2{w;ascowpsc:cecha;} przykład
Selektory specjalne jedne z najczęściej używanych pozwalają na nadanie indywidualnych cech takim samym elementom na stronie. Mamy dwa rodzaje takich selektorów: selektor klasy i indyfikatora. W dobrej praktyce selektor klas mogą być używane wielokrotnie natomiast selektor identyfiaktora powinien byc unikatowy, - niepowtarzalny'
Selektor klasy deklarujemy według wzoru: selektor.nazwa_klasy(wartość:cecha;)
Np.: < p>.t1(color:yellow;)
Do selektora klasy odwołujemy sie w kodzie HTML następująco:
< p class="nazwa klasy">
Można tworzyć klasy uniwersalne które będą działały na wielu elementach tworzymy je bez podawania nazwy selektora, od kropki n.:
.klasa2c{width:}
Selektor identyfiaktora deklarujemy w/g wzoru:
selektor #nazwa_identyfiaktora(właściwości:cecha;)
H3#ng3{font-size:1cm;}
Selektory specjalne pozwalają nadać indywidualne cechy elementom wielokrotnie wystepujący na stronie. Mamy dwa takie selektory:
selektory klasy i selektor identyfikatora.
p.akapit, gdzie p to seloktor a .akapit nazywa klasy. W kodzie HTML do selektora klasy odwołujemy się następująco: p class="nazwa klasy(bez kropki)" np. p class="akapit1".
Tworzenie selektora identyfikatora wygląda podobnie tylko znakiem rozpoczynającym jest hasch(#) no.: img#graf1. Podobnie również wstwiamy taki selektor do HTML'a: img id="graf1".
W przypadku obu tych selektorów możliwe jest tworzenei tzw. selektorów uniwersalnych, czyli nie przypisanych do określonego znacznika HTML. Dotyczy to szczegulnie klas. można taką klasę używać do wielu elementów.
Dobrą kaktyką jest stosowanie klas do wielu elementów, a identyfikatora tylko do jednego elementu.
Pseudokalsy wprowadzają styl zależnie od położenia kursora myszy lub działania (np.: wciśnięcia l_kl myszy). Najczęściej stosowane do formarowania linków, mogą być użyte to większości elementów.
PSeudoklasy deklarujemy od dwókropka (:) i mamy 4 możliwości:
Stosując psełdoklasy, powinniśmy użyć wszystkich, i w podanej wyrzej kolejności. Pseudoklasa hover może być użyta do formatowania elementów innych niż linki. Ten akapit posiada klasę sil z pseudoklasą hover
Selektory pseudo elementów formatują 1 litere akapitu albo 1 wiersz akapitu. Ich deklaracja to odpowiednio:
- selektor : first-letter{cechy:wartości;}
- selektor : first-line{cechy:wartosci;}