Selektorem może być dowolny element języka html, dla którego chcemy zdefiniować parametry formatowania. W zależności od sposobu odwoływania się od definicji regóły wyrużniamy następujące rodzaje selektorów:
Selektory elementów to najczęściej spotykane selektory o składni:selektor{właściwość:cecha;}
Selektor typu to podstawowy typ selektora np.:p, div, td{color:blue;}.
Selektoe uniwersalny (inaczej ogólny) to selektor pasujący do wzystkich znaczników. Ten selektor jest oznaczony *(gwiazdką). np.: *{font-family:tahoma;}.
Przy uzyciu selektora potomka możemy formatować elementy wpisane w inny, leżący wyżej w chierarchi strony element. Np.: jeżeli w elemencie <h2>, znajduje się element <i>, to jest on potomkiem elementu <h2> i formatujemy go według wzoru: h2 i{włąściwość:cecha;}
Selektor dziecka służy do formatowania elementów znajdujących się o jeden rząd niżej w chierarchii drzewa dokumentu. Ma on postać rodzic > dziecko{właściwość:cecha;}.
Selektor braci formatuje drugi element na tym samym poziomie hierarchii, według wzoru: brat1 + brat2{właściwość:cecha;}. Przykład na braci
W css mozna formatować znaczniki na podstawie posiadanych przez nie atrybutów. Postać selektora atrybutów; selektor[atrybut ="wartość atrybutu"]{właściwość:cehca;}. Selektory atrybutów można podzielić na trzy rodzaje:
Przykładowy akapit bez formatowania
Akapit sformatowany selektorem atrybutu: p[align]{ font-size:20px; color:red; }
Przykładowy akapit bez formatowania
Akapit sformatowany selektorem atrybutu: p[align="right"]{ font-size:16px; color:green; }
Przykładowy akapit bez formatowania
Akapit sformatowany selektorem atrybutu: p[title~="Jest"]{ font-family:comicsansMS; color:orange; }
Selektory specjalne, jedyne z najczęściej używanych, pozwalają na nadanie indywidualnych cech takim samym elementom na stronie. Mamy dwa rodzaje takich selektorów: selektor klasy i selektor identyfikatora. W dobrej praktyce selektory klas mogą być urzywane wielokrotnie, natomiast selektor identyfikatora powinien być unikatowy-nie powtarzalny.
Selektor klasy deklarujemy według wzoru: selektor.nazwa_klasy{cecha:wartość;}. np>: p.t1{color:yellow;}.
Do selektora klay odwołujemy się 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. Tworzyme je bez podawania nazwy selektora od kropki np.:
.klasa2c{width:700;}
Selektor identyfikatora deklarujemy według wzoru:
selektor#nazwa_identyfikatora(cechy:wartości;)
H3#ng3{font-size:1cm;}
Odwołanie do identyfikatora: selektor id="nazwa"
W przypatku obu tych selektorów możliwe jest tworzenie tzw.selektorów uniwersalnych, czyli nieprzypisanych do określonego znacznika HTML. Dotyczy to szczegulnie klas. Można taką klasę używać do wielu elementów.
Dobrą taktyką jest stosowanie klas do wielu elementów, a identyfikatora do jednego elementu
Pseudoklasy wprowadzają styl zależnie od położenia kursora myszy lub działania myszy (np.: wciśnięcia l_kl myszy). Najczęściej stosowane do formatowania plików, mogą być użyte do większości elementów.
Pseudoklasy deklarujemy od dwókropka (:) i mamy 4 możliwości:
Stosując pseudoklasy, powinniśmy użyć wszystkich, i w podanej wyżej kolejności. Pseudonim hover może być użyty do formatowaniu innych elementów niz link; Ten akapit posiada klase sil z pseudoklasą hover
Pseudoklasa :focus nadaje atrybuty formatowania odsyłaczowi (wcześniej wybranemu) lub polu formularza na którym został ustawiony kursor. Konstrukcja selektor:focus{cehca:wartość;}
W języku HTML nie ma mechanizmów dostępu do takich elementów jak pierwsza litera lub pierwsza linia akapitu. Do ich formatowania możemy użyć pseudoelementów dostępnych w CSS.
Pierwsza linia; first-line - może być formatowana następująco:
selektor:first-line{cecha:wartość;}
Pierwsza litera; first-letter - może być formatowana następująco:
selektor:first-letter{cecha:wartość;}
Formatowanie pierwszej litery: font-size:1cm; color:red;