Daudzi no jums jau zinās, kas tie tādi - CSS pseidoklases (pseidoselektori). Jā, jā, tas ir tas, ko parasti raksta aiz selektora nosaukuma, atdalot ar kolu. Pašas zināmākās pseidoklases ir :link, :hover, :visited un :active.
Tādas CSS konstrukcijas var sastapt gandrīz ikvienā CSS failā,tomēr to izmantošana aprobežojas vien ar hipersaišu stāvokļa apzīmēšanu.
Tomēr patiesībā pseidoklašu ir ievērojami vairāk. Apskatīsim tās.
Pseidoklašu nosaukumi un nozīme
- :link — atbild par neapmeklētas hipersaites stilu;
- :hover — objekta (var nebūt hipersaite) stāvoklis, kad uz tā uzvirzīts peles kursors;
- :active — objekta (var nebūt hipersaite) stāvoklis, kad uz tā uzvirzīts peles kursors un nospiesta poga;
- :visited — atbild par apmeklētas hipersaites stilu;
- :focus — objekta stils, kuram uzstādīts fokuss (objekts, ar kuru notiek darbība, piem. teksta ievades lauks, poga u.t.t.);
- :first-child — tekošā elementa pirmais meitas-elements;
- :last-child — tekošā elementa pēdējais meitas-elements;
- :only-child — piemēro stilu elementam, kurš ir vienīgais meitas-elements;
- :nth-child() — noteikts pēc skaita (no sākuma) meitas-elements, piemēram p:nth-child(4);
- :nth-last-child() — analoģiski, tikai atskaite no beigām; interesanti, ka šajos abos selektoros var izmantot ne tikai skaitļus, bet pat aritmētiskas darbības: ul li:nth-last-child(2n+1);
- :lang() — ja elementam uzstādīta valoda (ar atribūtu lang, piemēram lang="en"), tad elementu var izvēlēties šādi;
- :root — dod uzdevumu stilu pielietot saknes elementam ( html dokumentā tas ir tegs <html>);
- :not() — uzstāda ierobežojumu stila izmantošanai pēc selektora (t.i., selektors .red-block:not(div) piemēros norādīto stilu visiem elementiem ar klasi .red-block tikai tad, ja šis elements nav <div>);
- :empty — stilu pielietos tukšiem elementiem;
- :first-of-type — pielietos stilu tikai pirmajam noteiktā tipa elementam, tādējādi ja ir divi bloki (div), stils attieksies tikai uz pirmo no tiem;
- :last-of-type — analoģiski, tikai priekš pēdējā elementa;
- :only-of-type — piemēro stilu elementam, ja tam ir unikāls tips sava vecāka robežās;
- :nth-of-type() — izvēlas pēc skaita no sākuma attiecīgā tipa elementu;
- :nth-last-of-type() — tas pats, bet atskaite no beigām;
- :target — piemēram, ja adrese izskatās kā index.html#anchor, tad šī pseidoklase uzstādīs noteikumu elementam ar id="anchor";
- :enabled — izvēlas aktīvos ievades laukus;
- :disabled — analoģiski, tikai neaktīvos;
- :checked — iezīmētie "čekboksi" un "radiopogas";
- :indeterminate
— "čekboksiem" un "radiopogām" uzstāda stilu, ja tie irneitrāli;
- :default — ja elements atrodas stāvoklī pēc noklusējuma;
- :valid — stils pareizam ievades laukam (kad uzstādīts data type iekšHTML 5);
- :invalid — attiecīgi, ja nav uzstādīts iepriekš minētais;
- :in-range — kad ievades lauka vērtība atrodas noteiktās robežās (type="range", uzstādīts min un max, bet tas viss tikai iekš HTML 5);
- :out-of-range — kad neietilpst robežās;
- :required — visi obligāti aizpildāmie lauki;
- :optional — visi neobligāti aizpildāmie;
- :read-only — tie elementi, kuri pieejami tikai lasīšanai;
- :read-write — lasīšanai un ierakstam pieejamie lauki.
Pseidoelementu atbalsts dažādos pārlūkos
| Gecko (Firefox) | Trident (IE) | Webkit (Chrome/Safari) | Presto (Opera) | |
|---|---|---|---|---|
| :link | 1.0 | 3.0 | 85 | 7.0 |
| :visited | 1.0 | 3.0 | 85 | 7.0 |
| :active | 1.0 | Nē | 85 | 7.0 |
| :hover | 1.0 | 7.0 | 419.3 | 7.0 |
| :focus | 1.0 | 8.0 | Jā | 7.0 |
| :first-child | 1.0 | 7.0 | 85 | 7.0 |
| :lang() | 1.2 | 8.0 | 525 | 7.5 |
| :root | 1.0 | Nē | 85 | 9.5 |
| :not() | 1.0 | Nē | 85 | 9.5 |
| :empty | 1.8 | Nē | 412 | 9.5 |
| :first-of-type | 1.9.1 | Nē | 525 | 9.5 |
| :last-child | 1.0 | Nē | 525 | 9.5 |
| :last-of-type | 1.9.1 | Nē | 525 | 9.5 |
| :only-child | 1.8 | Nē | 525 | 9.5 |
| :only-of-type | 1.9.1 | Nē | 525 | 9.5 |
| :nth-child | 1.9.1 | Nē | 525 | 9.5 |
| :nth-last-of-type | 1.9.1 | Nē | 525 | 9.5 |
| :nth-last-child | 1.9.1 | Nē | 525 | 9.5 |
| :nth-of-type | 1.9.1 | Nē | 525 | 9.5 |
| :target | 1.3 | Nē | 525 | Daļēji |
| :enabled | 1.8 | Nē | 525 | 9.0 |
| :disabled | 1.8 | Nē | 525 | 9.0 |
| :checked | 1.0 | Nē | 525 | 9.0 |
| :indeterminate | 1.9.2 | Nē | 522 | Nē |
| :default | 1.9 | Nē | Nē | 9.0 |
| :valid | 1.8 | Nē | Nē | 9.0 |
| :invalid | 1.8 | Nē | Nē | 9.0 |
| :in-range | 1.8 | Nē | Nē | 9.0 |
| :out-of-range | 1.8 | Nē | Nē | 9.0 |
| :required | Nē | Nē | Nē | 9.0 |
| :optional | Nē | Nē | Nē | 9.0 |
| :read-only | Nē | Nē | Nē | Nē |
| :read-write | Nē | Nē | Nē | Nē |
