CSS selektorių lentelė su paaiškinimais
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/
