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 ' * '

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

<< Alkuun

---

tyyppivalitsin 'A'

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} 

<< Alkuun

---

jälkeläisvalitsin 'A B'

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>

<< Alkuun

---

lapsivalitsin 'A>B'

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).

<< Alkuun

---

vierekkäissisarukset -valitsin 'A+B'

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 } 

<< Alkuun

---

luokkavalitsin 'A.oma'

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.

<< Alkuun

---

ID-valitsin 'A#oma'

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 } 

<< Alkuun

---

CSS2 tukee samoja pseudovalitsimia kuin CSS1, tosin joidenkin toiminta on muuttunut. Lisäksi mukana on joukko uusi valitsimia.

---

ensimmäinen lapsi 'A:first-child'

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 } 

<< Alkuun

---

Pseudovalitsimet ':link ja :visited'

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>

<< Alkuun

---

dynaamiset pseudovalitsimet

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 }

<< Alkuun

---

kielivalitsin 'A:lang(c) '

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 } 

<< Alkuun

---

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:

• valitsimen kanssa: H1 [ATTRIBUUTTI]
• universaalivalitsimen kanssa: * [ATTRIBUUTTI]
• ilman valitsinta: [ATTRIBUUTTI]
  

<< Alkuun

---

A[abc]

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 } 

<< Alkuun

---

A[abc="xyz"]

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}

<< Alkuun

---

A[abc~="xyz"]

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}

<< Alkuun

---

A[abc|="xy"]

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.).

<< Alkuun

---