CSS-opas

CSS-TYYLEIHIN LIITTYVÄÄ KOULUTUSTA VUONNA 2008!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! IT-koulutuksen asiantuntijasi, Koulutus- ja konsultointipalvelu KK Mediat

Periytyminen ja valitsimet

Valitsimet - syntaksi

Tähän asti esitellyt esimerkit ovat hyödyntäneet ensisijaisesti nk. yksinkertaisia tyyppivalitsimia. Jos CSS-kieltä haluaa hyödyntää tehokkaammin ja monipuolisemmin, täytyy perehtyä nk. valitsinten hyödyntämiseen. Alla esitellään ensiksi kaikkien käytössä olevien valitsinten syntaksi, seuraavalla sivulla perehdymme valitsinten käyttöön esimerkkien avulla ja lopuksi tarkastelemme valitsinten toimivuutta eri selaimilla.

CSS1 ja CSS2 määrittelyn mukaiset valitsimet
Syntaksi	Tyyppi	Kuvaus
*	Universaali valitsin	Tyylisääntö kohdistuu kaikkiin elementteihin
E	Tyyppivalitsin	Tyylisääntö kohdistuu elementtiin E
E F	Jälkeläisvalitsin	Tyylisääntö kohdistuu kaikkiin elementteihin F, jotka ovat elementin E jälkeläisiä (sisällä)
E>F	Lapsivalitsin	Tyylisääntö kohdistuu kaikkiin elementteihin F, joiden vanhempana on elementti E
E,F	Ryhmittäjä	Tyylisääntö kohdistuu elementteihin E ja F
E+F	Sisarusvalitsin	Tyylisääntö kohdistuu kaikkiin elementteihin F, joita edeltää elementti E
E.a	Luokkavalitsin	Tyylisääntö kohdistuu kaikkiin elementteihin E, joiden class-attribuutilla on arvo a
E#a	Luokkavalitsin	Tyylisääntö kohdistuu elementtiin E, jonka id-attribuutilla on arvo a
E[a]	Attribuuttivalitsin	Tyylisääntö kohdistuu kaikkiin elementteihin E, joilla on attribuutti a (attribuutin nimestä ja arvosta riippumatta)
E[a="b"]	Attribuuttivalitsin	Tyylisääntö kohdistuu kaikkiin elementteihin E, joilla on attribuutti a ja attribuutin arvo on yhtä kuin b
E[a~="b"]	Attribuuttivalitsin	Tyylisääntö kohdistuu kaikkiin elementteihin E, joilla on attribuutti a (välilyönnillä erotettu arvojoukko) ja attribuutin arvo on yhtä kuin b.
E[a\|="b"]	Attribuuttivalitsin	Tyylisääntö kohdistuu kaikkiin elementteihin E, joilla on attribuutti a ja arvojoukko alkaa merkkijonolla b
E:after	Pseudoelementti	Elementtiä E seuraa sisältö, joka ilmoitetaan ominaisuudella content.
E:before	Pseudoelementti	Elementtiä E edeltää sisältö, joka ilmoitetaan ominaisuudella content.
E:first-letter	Pseudoelementti	Tyylisääntö kohdistuu elementin E ensimmäiseen kirjaimeen
E:first-line	Pseudoelementti	Tyylisääntö kohdistuu elementin E ensimmäiseen riviin
E:first-child	Pseudoluokka	Tyylisääntö kohdistuu elementin E ensimmäiseen jälkeläiseen (elementin sisällä)
E:link	Pseudoluokka	Tyylisääntö kohdistuu kaikkiin elementteihin E, jotka ovat vierailemattomia linkkejä. Vain a-elementti
E:visited	Pseudoluokka	Tyylisääntö kohdistuu kaikkiin elementteihin E, jotka ovat vierailtuja linkkejä. Vain a-elementti
E:lang(a)	Pseudoluokka	Tyylisääntö kohdistuu kaikkiin elementteihin E, joilla lang-attribuutin arvo on a
E:focus	Dynaaminen pseudoluokka	Tyylisääntö kohdistuu kaikkiin elementteihin E, joilla on fokus (esim. lomakekenttä)
E:hover	Dynaaminen pseudoluokka	Tyylisääntö kohdistuu kaikkiin elementteihin E, joiden päällä hiiri on. IE6 ja vanhemmat: vain a-elementti
E:active	Dynaaminen pseudoluokka	Tyylisääntö kohdistuu kaikkiin elementteihin E, jotka ovat aktiivisia (esim. maalattu hiirellä)

Työn alla oleva CSS 3 määrittely lähes kaksinkertaistaa valitsinten lukumäärän. Monet selaimet, esim. Opera 9, sisältävät kokeellisen tuen osalle CSS 3 valitsimia.

Tutustu artikkelin muihin osiin:
»»» CSS »»»Periytyminen
»»» CSS »»»CSS:n valitsimet - yleisesti ja listaus
»»» CSS »»»CSS:n valitsimet - esimerkit ja tarkempi esittely
»»» CSS »»»CSS:n valitsimet - pseudovalitsimet
»»» CSS »»»CSS:n valitsimet - toimivuus eri selaimilla

CSS-opas

Periytyminen ja valitsimet

Valitsimet - syntaksi

Tallenna tämä sivu kirjanmerkkeihin!