![]() |
|
|
|
Päivitetty: 10.03.2003.
Valitsimet muodostavat pohjan CSS-säännöille. Valitsin on se (x)HTML -elementti / elementtiryhmä, johon muotoilu kohdistuu. CSS2:n valitsimet ovat monipuolisemmat kun CSS1:n. Ne eivät rajoitu pelkästään yksittäisiin elementteihin, vaan eri kombinaatioita on runsaasti. Valitsimet voidaan jakaa kolmeen eri kategoriaan. Itse käytän niistä seuraavia nimityksiä: 'tavalliset valitsimet', 'pseudovalitsimet' sekä 'attribuuttivalitsimet'. Valitsimien yhteydessä käytetään seuraavia merkintöjä:
Tavalliset valitsimet ovat tuttuja jo CSS1:stä, tosin uusia valitsimia on tullut myös tähän ryhmään. Huomaa erityisesti, että luokkavalitsin on käytössä vain HTML-dokumenteissa, ja se voidaan korvata A[abc~="xyz"] -valitsimella. Vastaavasti id-valitsn voidaan korvata A[abc="xyz"] -valitsimella.
Universaali valitsin ' * ' (Universal selector) on kaikkein yleispätevin valitsin. Valitsin on siis tähti (*) eli jokerimerkki. * -sääntö vaikuttaa yksinkertaisesti kaikkeen, siksi se on yleensä liian yleisluonteinen. Esimerkiksi seuraava sääntö muuttaa kaikki elementit punaiseksi:
* { color: red }
*-valitsinta voidaan halutessa tarkentaa, mutta yleensä se voidaan jättää kokonaan pois, kuten seuraavassa nähdään:
*[LANG="fi"] = [LANG="fi"] *.oma_valitsin = .oma_valitsin *#oma_id = #oma_id
Tyyppivalitsin 'A' (Type selector). Elementti 'A' saa kyseisen määrittelyn ilman poikkeuksia. Tyyppivalitsin määrittää yksittäisen elementin muotoilun, Esim:
P { color: navy }
Myös useat valitsimet voivat saada samat arvot, jolloin ne erotetaan toisistaan pilkulla ( , )
h1, h2, h3 {color: black}
Yksi (tai useampi) valitsin voi saada useita arvoja, jolloin ne erotetaan toisistaan kaksoispisteellä ( ; )
h4 {color:red; margin-left:5%; margin-top: 2px}
Jälkeläisvalitsin 'A B' (Descendant selectors). Elementti 'B' saa määrittelyn vain, kun se on elementin 'A' jälkeläinen. Seuraavassa esimerkissä jälkeläisvalitsin 'B' eli <EM> saa värin red vain, kun se esiintyy <P> -elementin sisässä:
P EM { color: red }
Eli vastaavuus syntyy: <p>Tässä on <em>punaista<em></p>
Lapsivalitsin 'A>B' (Child selectors). Elementti 'B' saa määrittelyn vain, kun se elementin 'A':n lapsi. Seuraavassa esimerkissä <p> saa värin 'navy' vain, kun se on <div> -elementin lapsi.
DIV > EM { color: navy }
Vastaavuus syntyy esim:
<div>Tässä on <em>navy</em> <p> mutta <em>tässä ei</em></p></div>
Ylemmällä rivillä vastaavuus syntyy, koska <em> on <div> -elementin lapsi. Alemmalla rivillä vastaavuutta ei enää synny koska <em> on nyt <p> -elementin lapsi! Tällöin <div> on enää isovanhempi. Jos kyseessä olisi ollut vain jälkeläisvalitsin, vastaavuus olisi syntynyt molemmissa tapauksissa.
Jälkeläis- ja lapsivalitsin saattavat mennä helposti sekaisin. Muista että lapsi on aina jälkeläinen, mutta kaikki jälkeläiset eivät ole lapsia (aivan kuten oikeassa elämässäkin).
Vierekkäissisarukset 'A+B' (Adjacent sibling selectors). Valitsin 'B' saa määrittelyn arvon vain, jos se on 'A':n sisar. Seuraava esimerkki määrää <P> -elementin punaiseksi, jos se sijaitsee välittömästi <H1>-elementin jälkeen:
H1+P { color:red }
Eli vastaavuus syntyy ensimmäisen p-elementin kohdalla:
<h1>Otsikko</h1> <p>Punainen</p> <p>normaali</p>
Myös tarkempi määrittely on mahdollista. Seuraava esimerkki
toimii muuten samoin kun edellinen, mutta H1:llä täytyy olla luokka
oma (class="oma"
) ja P-elementillä tunniste
this (id="this"
):
H1.oma + P#this { color: red }
Luokkavalitsin 'A.oma' (Class selectors). Valitsin 'A' saa määrittelyn vain, jos sillä on luokka oma. Luokan määritys alkaa aina pisteellä, jonka jälkeen tulee luokan nimi ja määrittelyt:
.oma { color:red }
Kyseinen luokka voidaan kiinnittää haluttuun elementin class -attribuutilla, jolloin luokka vaikuttaa elementin lopetustagiin asti:
<p class="oma">...</p>
Luokka määritystä voidaan myös tarkentaa, jolloin sitä voidaan käyttää vain määritellyn elementin kanssa. Seuraava this -luokka toimii vain h2-elemetin yhteydessä:
H2.this { color: white}
Huomaa, että luokka-valitsin on tarkoitettu käytettäväksi vain HTML-dokumenttien kanssa. XML:n yhteydessä pitää käyttää attribuuttivalitsinta esim. seuraavasti:
* [class~="oma"] { color:red }
Eli mikä tahansa elementti (*) jonka luokka-attribuutti on 'oma'
tai 'omaVari', 'omaLeveys', 'omaJotain' jne.) saa punaisen
värin.
ID-valitsin 'A#oma' (Identification selector). Valitsin 'A' saa määrittelyn vain, jos sillä oleva tunniste (id) saa arvon oma. Tunnisteen määritys alkaa aina risuaitamerkillä ( # ), jonka jälkeen tulee tunnisteen nimi ja määrittely.
Myös id-valitsin on attribuuttivalitsin, mutta sen painoarvo ohittaa normaalin attribuuttivalitsimen. Huomaa, että (x)HTML- ja XML -dokumentti ei saa sisältää useita elementtejä joilla on sama id! Seuraava esimerkki määrittää elementin, jonka id on "omaid", väriksi punaisen:
#omaid { color:red }
CSS2 tukee samoja pseudovalitsimia kuin CSS1, tosin joidenkin toiminta on muuttunut. Lisäksi mukana on joukko uusi valitsimia.
Ensimmäinen lapsi 'A:first-child' (:first-child pseudo-class). Elementin 'A' ensimmäinen lapsi -valitsin saa määrittelyn. Esimerkiksi <OL> -elementin ensimmäiseen <LI> -elementtiin voidaan viitata seuraavasti:
OL:first-child { color:red }
Linkki pseudovalitsimet 'A:link ja A:visited'. Pseudovalitsin :link määrittää käyttämättömän linkin muotoilun. Vastaavasti :visited määrittää käytetyn linkin asetukset. Linkin muotoilu voidaan määritellä seuraavasti:
a:link {color: blue} tai
:link {color: blue}
Vastaavasti käytetyn linkin muotoilu voidaan tehdä:
a:visited {color: navy} tai
:visited {color: navy}
Huomaa, että kumpaakin määrittelyä voidaan tarkentaa esimerkiksi luokalla:
a.oma:link {color: yellow}
a.oma:visited {color: gold}
Tällöin linkin määritykset toimivat tietenkin vain, jos
A-elementillä on luokka "oma" esim:
<A CLASS="oma" href="http://www.jotain.com">Linkki
jonnekin</A>
Dynaamiset pseudovalitsimet 'A:active, A:hover ja A:focus' vaikuttavat linkin määrityksiin eri tilanteissa.
:hover
määrittää linkin asetuksen kun kohdistin
on linkin päällä.
:focus
määrittely jää voimaan kunnes seuraavaa
linkkiä napsautetaan
:active
määrittää linkin asetukset napsautuksen
ajaksi.
a:hover { color: yellow } a:focus { color: green } a:active{ color: red }
Myös dynaamiset pseudovalitsimet voidaan tarkentaa luokalla. Seuraavaksi kuitenkin esimerkki jälkeläisvalitsimen käytöstä linkkien yhteydessä. Seuraavat linkin asetukset koskevat vain <A> -elementtiä, joka esiintyy taulukossa:
table a:hover {color: color:red } table a:focus {color: color:yellow } table a:active {color: yellow }
Kielivalitsin 'A:lang(c)' (The language pseudo-class). Määrittely tulee voimaan elementille 'A' vain, jos se on kielivalitsin ':lang' saa arvon 'c'. Seuraava esimerkki koskee <P> -elementtiä, jonka kielitunniste on Suomi (fi):
p:lang(fi) {color:white;
background-color: blue }
Vastaavasti voidaan luoda määritteet eri kielille esim. Ruotsille:
p:lang(sw) {color:yellow;
background-color: blue }
Attribuuttivalitsimet käyttävät, nimensä mukaisesti, tarkentimena
elementin attribuuttia. Attribuuttivalitsimen tunnistaa siinä aina olevista
hakasuluista [ ]
. Hakasulkujen väliin tulee elementin attribuutti
johon viitataan.
Attribuutti valitsin viittaa siis (x)HTML- tai XML -elementtien attribuutteihin.
Esimerkiksi tuiki tavallinen <img> -elementti voi sisältää
mm. seuraavia attribuutteja: 'src', 'alt', 'name', 'height', 'width',
'align',' border',' hspace'
sekä 'vspace
'.
Attribuuttivalitsin voi siis viitata mihin vain edellä mainituista attribuuteista.
Kuten aikaisemmin jo mainitsin, myös luokka- ja id- valitsimet luokitellaan
CSS2 specification mukaan attribuuttivalitsimiksi. Eli class="..."
ja id="..."
ovat attribuutteja aivan kuten src="..."
tai href="..."
.
Attribuuttivalitsinta voi käyttää seuraavilla tavoilla:
H1 [ATTRIBUUTTI
]*
[ATTRIBUUTTI
][ATTRIBUUTTI
]Vastaavuus syntyy, kun elementillä 'A' on attribuutti 'abc'. Esimerkiksi luodaan sääntö joka vaikuttaa kaikkiin <img> -elementteihin joilla on attribuutti "src":
img[src] { border: none }
Jos haluamme luoda säännön joka vaikuttaa kaikkiin elementteihin, joilla on "src" attribuutti, luomme säännön:
* [src] { border: none } tai vain
[src] { border: none }
Vastaavuus syntyy vain, kun elementillä 'A' on attribuutti 'abc' ja se saa arvon 'xyz'. Seuraava sääntö vaikuttaa vain niihin <IMG> -elementteihin, joiden 'src' -attribuutti on 'kuva.gif'
img[src="kuva.gif"] { border: none}
Vastaavuus syntyy, kun elementillä 'A' on attribuutti 'abc' ja se saa arvon 'xyz' tai "'xyzMitä_vaan'. Seuraava sääntö vaikutta niihin <P> -elementteihin, joiden luokkatunniste (class) on "red" tai esimerkiksi "redLight", "redHat" tai "redJotain"
p[class~="red"] { color: #FF0000}
Vastaavuus syntyy kun elementillä 'A' on attribuutti 'abc' ja se alkaa arvolla 'xy' ja/tai jatkuu väliviiva merkillä ( - ) 'xy-n', 'xy-mitävain'. Seuraava esimerkki vaikuttaa niihin <P> - elementteihin, joiden lang -attribuutti alkaa päätteellä "fi": Muita fi-päätteitä kun Finland ei ole, joten sääntö vaikuttaa vain arvolla Finland.
P[lang|="fi"] { colr: blue}
Seuraava sääntö määrittää ne <H1> -elementit, joiden lang -attribuutti alkaa 'en' ja jotka jatkuvat väliviiva merkillä ( - ). Eli 'en' lisäksi myös "en-US", "en-GB" sekä "en-AU".
h1[lang|="en"] { color : red }
(Langin perässä on pystyviiva ( | ), joka saadaan aikaan kun painetaan [Alt Gr] ja [< >] -näppäimiä yhtäaikaa.).