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:
Na początekPrzykł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. Ten akapit posiada klasę sil z psuedoklasą hover.
Psudoklasa :focus nadaje atrybuty formatowania odsyłaczowi wcześniej wybranemu lub pou formularza na którym został ustawiony kursor. Konstrukcja selektor:focus(cecha:wartość).
Na początekW języku HTML nie ma mechanizmu dostępu do takich elementów jak pierwsza litera lub pierwsza linia akapitu. Do ich formatowania możemy użyć psudoelementów dostępnych w CSS.
Pierwsza linia; first-line może być formatowana następująco:
Selektor:first-line{cechy:wartości};
Pierwsza litera; first-letter - selektor:first-letter{cecha:wartość};
Formatowanie pierwszej litery: font-size:1cm; color:red;
Na początek