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ę do definicji reguły wyrózniamy 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 selektory np.: p, div, td(color:blue;).
Selektor uniwersalny (inaczej ogólny) to slektor pasujący do wszystkich znaczników. Ten selektor jest oznaczany *(gwiazdką). Np.: *(font-family:tahoma;)
Przy użyciu selektora potomka możemy formatować elementy wpisane w inny, leżący wyżej w hierarchii strony element. Np.: jeże w elemencie < h2>, znajduje się element < i>, to jest on potomkiem elementu < h2> i formatujemy go według wzoru: h2 i(własciwość:cecha;)
Selektor dziecka służ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ściowość:cecha;)
Selektor braci formatuje 2 element na tym samym poziomie hierarchii, w/g wzoru: brat1+ brat2(właściwość:cecha;) Przykład na braci
Na GóreW CSS można formatować znaczniki na podstawie posiadanych przez nie atrybutów. Postać selektora atrybutów: selektor[atrybut="wartość atrybutu"]{właściwość:cecha;}. Selektory atrybutów można podzielic na trzy rodzaje:
Przkładowy akapit bez formatowania
Akapit formatowany selektorem atrybutu: p[align]{ font-size:20px; color:red; }
Przkładowy akapit bez formatowania
Akapit formatowany selektorem atrybutu z wartością: p[align="right"]{ font-size:12px; color:blue; }
Przkładowy akapit bez formatowania
Akapit formatowany selektorem atrybutu z wartością: p[title~="jest"]{ font-family:Comic Sans MS; color:green; }
Selektory specjalne pozwalają nadać indywidualne cechy elementom wielokrotnie występującym na stronie. Mamy dwa takie selektory: selektor klasy i selektor identyfikatora.
Selektor klasy tworzymy zaczynając nazwę klasy od kropki (.), np.: p.akapit1, hdzie p to selektor a .akapit1 nazwa 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 hash(#) np.: img#graf1. Podobnie również wstawiamy taki selektor do HTML'a: img id="graf1".
W przypadku obu tych selektorów możliwe jest tworzenie tzw. selektorów uniwersalnych, czyli nie przypisanych do określonego znacznika HTML. Dotyczy to szczególnie klas. Można taką klasę używać do wielu elementów.
Dobrą praktyką jest stosowanie klas do wielu elementów, a identyfikatora tylko do jednego elementu.
Pseudoklasy wprowadzają styl zależnie od położenia kursora myszy lub działania(np.: wciśnięcia l_kl myszy). Najczęściej stosowane do formatowania linków, mogą być użyte do większości elementów.
Pseudoklasy deklarujemy od dwukropka(:) i mamy 4 możliwości:
Stosując pseudoklasy, powinniśmy użyć wszystkich, i w podanej wyżej kolejności. Pseudoklasa hover może być użyta do formatowania elementów innych niż linki. Ten akapot posiada klasę "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{cecha: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życ pseudoelementó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 Góre