CSS:Selektorid
Allikas: Wikibooks
Allolev tabel annab ülevaate kõigist CSS1, CSS2 ja CSS3 selektoritest. Viimane tulp "CSS-i versioon" näitab seda, millises CSS-i versioonis vastav selektor esmakordselt defineeriti.
| Muster | Tähendus | CSS-i versioon |
|---|---|---|
* |
suvaline element | CSS2 |
E |
element tüübist E |
CSS1 |
E[foo] |
element E, millele on määratud atribuut foo |
CSS2 |
E[foo="bar"] |
element E, mille atribuudi foo väärtus on täpselt võrde väärtusega "bar" |
CSS2 |
E[foo~="bar"] |
element E, mille atribuudi foo väärtuseks on rida tühikuga eraldatud väärtusi, milledest üks on täpselt võrdne väärtusega "bar" |
CSS2 |
E[foo^="bar"] |
element E, mille atribuudi foo väärtus algab sõnega "bar" |
CSS3 |
E[foo$="bar"] |
element E, mille atribuudi foo väärtus lõpeb sõnega "bar" |
CSS3 |
E[foo*="bar"] |
element E, mille atribuudi foo väärtus sisaldab alamsõnet "bar" |
CSS3 |
E[hreflang|="et"] |
element E, mille atribuudi hreflang väärtuseks on rida sidekriipsuga eraldatud väärtusi, milledest esimene (vasakpoolseim) on võrdne väärtusega "et" |
CSS2 |
E:root |
element E, mis on dokumendu juurelemendiks |
CSS3 |
E:nth-child(n) |
element E, oma vanema n-is laps |
CSS3 |
E:nth-last-child(n) |
element E, oma vanema n-is laps, alustades loendamist viimasest |
CSS3 |
E:nth-of-type(n) |
element E, n-is E-tüüpi element |
CSS3 |
E:nth-last-of-type(n) |
element E, n-is E-tüüpi element, alustades loendamist viimasest |
CSS3 |
E:first-child |
element E, oma vanema esimene laps |
CSS2 |
E:last-child |
element E, oma vanema viimane laps |
CSS2 |
E:first-of-type |
element E, esimene E tüüpi element |
CSS3 |
E:last-of-type |
element E, viimane E tüüpi element |
CSS3 |
E:only-child |
element E, oma vanema ainus laps |
CSS3 |
E:only-of-type |
element E, ainuke E tüüpi element |
CSS3 |
E:empty |
element E, millel pole ühtki last (ei sisalda ka teksti) |
CSS3 |
E:link |
hüperlingiks olev element E, mis on veel külastamata. |
CSS1 |
E:visited |
hüperlingiks olev element E, mis on külastatud. |
CSS1 |
E:active |
element E, mis on aktiveeritud kasutaja poolt (näiteks hiirekursoriga elemendi peale vajutamise ajal) |
CSS1 |
E:hover |
element E, mida kasutaja "kompab"? (näiteks hiirekursoriga elemendi peale olles) |
CSS1 |
E:focus |
element E, mis parajasti omab fookust (näiteks tekstikast, mis aktsepteerib sisendit klaviatuurilt) |
CSS1 |
E:target |
element E, mis dokumendile viitava URI sihtmärgiks |
CSS3 |
E:lang(fr) |
element E keeles "fr" |
CSS2 |
E:enabled |
kasutajaliidese element E, mille kasutamine on lubatud |
CSS3 |
E:disabled |
kasutajaliidese element E, mille kasutamine pole võimalik |
CSS3 |
E:checked |
kasutajaliidese element E, mis on valitud |
CSS3 |
E:indeterminate |
kasutajaliidese element E, mis pole valitud |
CSS3 |
E:contains("foo") |
element E, milles sisalduvas tekstis sisaldub alamsõne "foo" |
CSS3 |
E::first-line |
elemendi E, esimene renderdatud rida |
CSS1 |
E::first-letter |
elemendi E, esimene renderdatud täht |
CSS1 |
E::selection |
see osa elemendist E, mis on parajasti kasutaja poolt selekteeritud |
CSS3 |
E::before |
genereeritud sisu enne elementi E |
CSS2 |
E::after |
genereeritud sisu peale elementi E |
CSS2 |
E.foo |
element E, mille klass on "foo" |
CSS1 |
E#foo |
element E, mille ID on "foo" |
CSS1 |
E:not(s) |
element E, mis ei osutu valituks lihtsa selektoriga s |
CSS3 |
E F |
element F, mis on elemendi E järglane |
CSS1 |
E > F |
element F, mis on elemendi E laps |
CSS2 |
E + F |
element F, millele vahetult eelneb element E |
CSS2 |
E ~ F |
element F, millele eelneb element E |
CSS2 |
[redigeeri] Välislingid
[redigeeri] Õpetused
- Selectutorial - CSS 1 ja 2 selektorite seletused.
- CSS 3 selectors explained - CSS 3 selektorite seletused.
