Siirry sivun sisältöön Avut CSS HTML JavaScript Kotisivu

CSS-selektorit

Selektorit tai valitsimet ovat kaavoja, jotka vastaavat HTML- tai XML-dokumenttipuiden solmuja. Selektoreiden avulla yhdistetään tyyliominaisuuksia dokumenttien elementteihin.

Sivun taulukkoon on koottu CSS3-valitsimien perusrakenne, sekä linkit kunkin selektorityypin esimerkki/testi-sivulle.

Syntaksi Kuvaus V.
* Universaali selektori koskee mitä tahansa elementtiä. 2
elem Tyyppiselektori koskee elem-tyyppistä elementtiä. 1
.xx Luokkaselektori koskee mitä tahansa elementtiä, joka kuuluu luokkaan xx. 1
#xx Tunnisteselektori koskee elementtiä, jonka yksilöllinen tunniste on xx. 2
Attribuuttiselektorit
[attrib] Attribuuttiselektori koskee mitä tahansa elementtiä, jolla on attrib-attribuutti. 2
[attrib="xx"] Attribuutti- ja arvo -selektori koskee mitä tahansa elementtiä, jolla on attrib-attribuutti, jonka arvo on xx. 2
[attrib~="xx"] Attribuutti- ja yksi arvoista -selektori koskee mitä tahansa elementtiä, jolla on attrib-attribuutti, jonka yksi arvoista on xx. 2
[attrib|="xx"] Attribuutti- ja ensimmäinen arvo -selektori koskee mitä tahansa elementtiä, jolla on attrib-attribuutti, jonka ensimmäinen arvo on xx. 2
[attrib^="abc"] Attribuutti- ja arvon alku -selektori koskee mitä tahansa elementtiä, jolla on attrib-attribuutti, jonka arvo alkaa merkkijonolla abc. 3
[attrib$="abc"] Attribuutti- ja arvon loppu -selektori koskee mitä tahansa elementtiä, jolla on attrib-attribuutti, jonka arvo loppuu merkkijonolla abc. 3
[attrib*="abc"] Attribuutti- ja arvo sisältää -selektori koskee mitä tahansa elementtiä, jolla on attrib-attribuutti, jonka arvo sisältää merkkijonon abc. 3
Näennäisluokat
:root Juuriselektori koskee dokumenttielementtiä. 3
:empty Tyhjäselektori koskee mitä tahansa elementtiä, jolla ei ole lapsielementtejä tai tekstisisältöä. 3
:first-child Ensimmäinen lapsi -selektori koskee mitä tahansa elementtiä, joka on emonsa ensimmäinen lapsi. 2
:last-child Viimeinen lapsi -selektori koskee mitä tahansa elementtiä, joka on emonsa viimeinen lapsi. 3
:only-child Ainoa lapsi -selektori koskee mitä tahansa elementtiä, joka on emonsa ainut lapsi. 3
:first-of-type Ensimmäinen tyyppiään -selektori koskee mitä tahansa elementtiä, joka on emonsa ensimmäinen tietyn tyyppinen elementti. 3
:last-of-type Viimeinen tyyppiään -selektori koskee mitä tahansa elementtiä, joka on emonsa viimeinen tietyn tyyppinen elementti. 3
:only-of-type Ainoa tyyppiään -selektori koskee mitä tahansa elementtiä, joka on emonsa ainut tietyn tyyppinen elementti. 3
:nth-child(n) Mones lapsi -selektori koskee elementtejä perustuen niiden sijaintiinsa emoelementin lapsien luettelossa. Sijainti annetaan n-argumentilla, joka voi olla pariteettia ilmaiseva avainsana (odd tai even), elementin järjestyslukua ilmaiseva kokonaisluku tai lauseke (muodossa an+b, jossa b edustaa ensimmäisen valittavan elementin järjestyslukua ja a edustaa seuraaviksi valittavien vastaavaa). 3
:nth-last-child(n) Mones viimeinen lapsi -selektori koskee elementtejä perustuen niiden sijaintiinsa emoelementin lapsien luettelossa. Sijainti annetaan kuten edelläkin, mutta laskenta alkaa viimeisestä elementistä. 3
:nth-of-type(n) Mones tyyppiään -selektori koskee saman tyyppisiä elementtejä perustuen niiden sijaintiinsa emoelementin lapsien luettelossa. Sijainti annetaan n-argumentilla, joka voi olla pariteettia ilmaiseva avainsana (odd tai even), elementin järjestyslukua ilmaiseva kokonaisluku tai lauseke (muodossa an+b, jossa b edustaa ensimmäisen valittavan elementin järjestyslukua ja a edustaa seuraaviksi valittavien vastaavaa). 3
:nth-last-of-type(n) Mones viimeinen tyyppiään -selektori koskee saman tyyppisiä elementtejä perustuen niiden sijaintiinsa emoelementin lapsien luettelossa. Sijainti annetaan kuten edelläkin, mutta laskenta alkaa viimeisestä elementistä. 3
:lang(xx) Kieliselektori koskee mitä tahansa elementtiä, jonka kieli on xx. 2
:link Linkkiselektori koskee vierailemattomaksi luokiteltuja linkkejä. 1
:visited Visitoitu linkki -selektori koskee vierailluksi luokiteltuja linkkejä. 1
:target Kohdeselektori koskee mitä tahansa elementtiä, joka on tällä hetkellä fragmenttitunnisteen kohteena. 3
:active Aktiiviselektori koskee mitä tahansa elementtiä, joka on käyttäjän aktivoima. 1
:hover Osoitusselektori koskee mitä tahansa elementtiä, joka on käyttäjän osoittamana. 1
:focus Kohdistusselektori koskee mitä tahansa elementtiä, jossa on kohdistus. 2
:checked Valintaselektori koskee valittuja (selected tai checked attribuutin omaavia) elementtejä. 3
:enabled Enabloituselektori koskee aktiiveja (disabled-attribuutin omaavia) elementtejä. 3
:disabled Disabloituselektori koskee (disabled-attribuutila) deaktivoituja elementtejä. 3
:not(s) Negaatioselektori koskee mitä tahansa elementtiä, joka ei ole s (tässä s saa olla mikä tahansa selektori paitsi näennäiselementti tai toinen negaatioselektori). 3
Näennäiselementit
::first-letter Ensimmäinen kirjain -selektori koskee mitä tahansa lohkotason elementin ensimmäistä kirjainta. 3
::first-line Ensimmäinen rivi -selektori koskee minkä tahansa lohkotason elementin ensimmäistä (teksti)riviä. 3
::before Ennen elementtiä -selektori koskee minkä tahansa elementin edeltävää ja (content-ominaisuudella) tuotettua näennäissisältöä. 3
::after Jälkeen elementin -selektori koskee minkä tahansa elementin jälkeistä ja (content-ominaisuudella) tuotettua näennäissisältöä. 3
Yhdistäjät
elem elem2 Jälkeläisselektori koskee elem-tyyppisen elementin elem2-tyyppisiä jälkeläisiä. 1
elem > elem2 Lapsiselektori koskee elem-tyyppisen elementin elem2-tyyppistä lapsia. 2
elem + elem2 Viereisselektori koskee elem-tyyppistä elementtiä välittömästi seuraavaa saman emon elem2-tyyppistä elementtiä. 2
elem ~ elem2 Epäsuora viereisselektori koskee elem-tyyppistä elementtiä seuraavaa saman emon elem2-tyyppistä elementtiä. 3

yksi taso ylös