CSS kalba turi selektorius, per kuriuos yra priskiriamos taisyklės. Selektorius tai yra ta dalis, kuri parenka kokiems html elementams bus taikomos css taisyklės. Šioje lentelėje galite matyti CSS1, CSS2 ir CSS3 kalbų versijų selektorius. Lentelėje selektoriai yra tarptautine angliška išraiška parašyti tam, kad supratę šią lentelę galėtumėte lengvai susigaudyti užsienio puslapiuose. Po lentele yra simbolių ir angliškų žodžių paaiškinimai. Jei norite pilnai suprasti visus selektorius, turite gerai mokėti html kalbą. Apie html skaitykite html skiltyje.
E - bet koks html elementas
foo - betkokia reikšmė
bar - betkokia reikšmė
Labiausiai naudojamus pajuodinau. Gali būti, kad jūs naudojat dažniau kitus selektorius.
Selektorius | Paaiškinimas | Tipas | Nuo CSS |
* | Bet koks elementas | Universalus selektorius |
2 |
E | Elementai pagal tipą, t.y. kokia nors HTML žymė: div, table, td, strong, span, body ir t.t. |
Pagal elemento tipą |
1 |
E[foo] | Elementas su atributu laužtiniuose skliaustuose, pvz.: div[width] |
Pagal atributą |
2 |
E[foo="bar"] | Elementas su atributu laužtiniuose skliaustuose ir jo konkrečia reikšme, pvz.: div[class="testas"] | Pagal atributą | 2 |
E[foo~="bar"] | Elementas, kurio atributo reikšmės yra kelios ir surašytos atskiriant tarpu, viena iš jų yra tokia kaip "bar", pvz.: div[class~="testas"] | Pagal atributą | 2 |
E[foo^="bar"] | Elementas, kurio atributo reikšmė prasideda būtent taip pat kaip "bar", pvz.: div[class^="test"] | Pagal atributą | 3 |
E[foo$="bar"] | Elementas, kurio atributo reikšmė pasibaigia būtent taip pat kaip "bar", pvz.: div[class$="test"] | Pagal atributą | 3 |
E[foo*="bar"] | Elementas, kurio atributo reikšmėje yra "bar", pvz.: div[class*="test"] | Pagal atributą | 3 |
E[foo|="en"] | Elementas, kurio atributo reikšmės yra kelios ir surašytos atskiriant brūkšneliu, reikšmės pradžia yra tokia kaip "bar", pvz.: div[class|="testas"] | Pagal atributą | 2 |
E:root | Pagrindinis HTML dokumento elementas, HTML 4 kalboje jis visada yra <html> |
Pagal struktūrinę pseudo klasę |
3 |
E:nth-child(n) | n-tasis vidinis elementas, pvz.: tr:nth-child(odd) |
Pagal struktūrinę pseudo klasę | 3 |
E:nth-last-child(n) | Elementas n-tasis vidinis elementas, skaičiuojant nuo paskutinio, Pvz.: tr:nth-last-child(-n+2) paims dvi paskutines lentelės eilutes |
Pagal struktūrinę pseudo klasę | 3 |
E:nth-of-type(n) | n-tasis elementas pagal tipą, pvz.: img:nth-of-type(2n+1) | Pagal struktūrinę pseudo klasę | 3 |
E:nth-last-of-type(n) | n-tasis elementas pagal tipą, skaičiuojant nuo paskutinio |
Pagal struktūrinę pseudo klasę | 3 |
E:first-child | Elementas, pirmas tėvinio vidinis elementas, pvz.: div > p:first-child paims pirmą paragrafą esantį viduje div |
Pagal struktūrinę pseudo klasę | 2 |
E:last-child | Elementas esantis tėvinio elemento paskutinis vidinis elementas, pvz.: ol > li:last-child |
Pagal struktūrinę pseudo klasę | 3 |
E:first-of-type | Elementas, pirmas tokio pat tipo, pvz.: dl dt:first-of-type |
Pagal struktūrinę pseudo klasę | 3 |
E:last-of-type | Elementas, paskutinis tokio pat tipo, pvz.: dl dt:last-of-type | Pagal struktūrinę pseudo klasę | 3 |
E:only-child | Elementas, kuris turi tėvinį elementą ir jo tėvinis elementas neturi daugiau vidinių elementų, tik jį patį. Tas pats kaip :first-child:last-child arba :nth-child(1):nth-last-child(1) |
Pagal struktūrinę pseudo klasę | 3 |
E:only-of-type | Elementas, kuris turi tėvinį elementą ir jo tėvinis elementas neturi daugiau tokio pat tipo vidinių elementų, tik jį patį. Tas pats kaip :first-of-type:last-of-type arba :nth-of-type(1):nth-last-of-type(1) | Pagal struktūrinę pseudo klasę | 3 |
E:empty | Elementas, kuris nieko neturi savo viduje, pvz p:empty paims visus <p></p> |
Pagal struktūrinę pseudo klasę | 3 |
E:link E:visited |
Elementas, kuris yra nuoroda dar nelankyta (:link) ir jau lankyta (:visited) |
Nuorodų pseudo klasė |
1 |
E:active E:hover E:focus |
Elementas su vartotojo veiksmais. :active - laiko tarpas, kol vartotojas laiko paspaudęs pelės mygtuką ant elemento, bet dar neatleidęs. :hover - laiko tarpas, kol vartotojas yra užėjęs su pelės žymekliu ant elemento. :focus - laikas, kai vartotojas sufokusavęs pelės žymeklį ant elemento, pvz įvedimo lauko. |
Vartotojo veiksmų pseudo klasės |
1 ir 2 |
E:target | Elementas, į kurį nurodo inkaro tipo nuoroda (URI), pvz.: p.tekstas:target paims elementą p, kurio klasė yra tekstas ir į jį rodo nuoroda tokiu būdu: http://www.adresas.lt/index.php#tekstas |
Nuorodos taikinio pseudo klasė |
3 |
E:lang(fr) | Elementas tokio tipo kaip E ir su kalba "fr" |
Kalbos pseudo klasė |
2 |
E:enabled E:disabled |
a user interface element E which is enabled or disabled Vartotojo sąsajos (UI) elementas E, kuris yra aktyvus (:enabled) arba ne (:disabled) |
Vartotojo sąsajos (UI) elementų būsenos pseudo klasė |
3 |
E:checked | a user interface element E which is checked (for instance a radio-button or checkbox) Vartotojo aplinkos (UI) elementas E, kuris yra pažymėtas, taikomas radio mygtukams ir checkbox dėžutėms |
Vartotojo sąsajos (UI) elementų būsenos pseudo klasė | 3 |
E::first-line | Pirma E elemento formatuota eilutė |
Pirmos eilutės pseudo elementas |
1 |
E::first-letter | Pirma E elemento teksto raidė |
Pirmos raidės pseudo elementas | 1 |
E::before | Sugeneruotas turinys prieš elementą E |
::before pseudo elementas |
2 |
E::after | Sugeneruotas turinys po elemento E | ::after pseudo elementas | 2 |
E.bandom | Elementas E su klase bandom |
Klasės selektorius |
1 |
E#manoid | Elementas E su id manoid |
ID selektorius |
1 |
E:not(s) | Elementai kurie nėra tokie, kuriuos paima selektorius s, pvz.: *:not(div) reiškia visi elementai tik ne divan |
Neigimo pseudo klasė |
3 |
E F | F elementas, kuris yra viduje E elemento. Jei naudosite išraišką E * F, tai reikš F elementas, kuris yra viduje E elemento, arba yra vidinis vidinių E elementų elementas |
Vidinių elementų kombinacija |
1 |
E > F | F elementas, kuris yra vidinis E elemento elementas |
Vidinių elementų kombinacija |
2 |
E + F | F elementas, kuris yra iš karto po E elemento. Ne viduje, o po jo! |
Šalimos giminystės kombinacija |
2 |
E ~ F | F elementas, kuris yra po E elemento. Ne viduje, o po jo ir nebūtinai iš karto! | Tolimos giminystės kombinacija |
3 |
Paaiškinimas: Nuo CSS rodo nuo kelintos CSS versijos pradėtas naudoti.
Pilna informacija anglų kalba: http://www.w3.org/TR/css3-selectors/