[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]
Aihepiiriluettelo > CSS-oppaan etusivu > Opassivut > 4. Mitä ovat valitsimet, luokat ja id-attribuutit > Perusvalitsimet ja ryhmittäminen (jakso 1/4)

Perusvalitsimet ja ryhmittäminen

Aiheet

Yleisvalitsimet

Yleisvalitsimella tarkoitetaan sitä, että selain ei siis yritä löytää dokumentista mitään tiettyä vastaavuutta, vaan selain etsii kaikki dokumentin elementit, joihin CSS:ää voi soveltaa. Yleisvalitsimilla on valitsimista alin prioriteetti.

Muistutus. Kuten jo aiemmin olen tuonut esille, elementin tunnisteella ei tarkoiteta koko elementtimerkkausta (tag), vaan jotain merkkauksen aliosaa, joka toimii tunnisteena. Yleisvalitsimen kyseessä ollessa tunnistimina ovat elementtityyppien nimet eli yleistunnistimet (generic identifiers) = elementtimerkkaukset ilman alku- ja loppurajoittimia sekä attribuutteja. Esimerkkinä voisi mainita elementit P ja B (sanan identifier termipuu[S][Pw]).

Esimerkkien ensimmäinen määrittelytapa on kaikkein yleisin, mitä voi ajatella. Seuraavassa esimerkissä on myös muutamia muita HTML-asiakirjoille tarkoitettuja yleisvalitsimen käyttötapoja ([M][S][Pw]):

*{color:red;} /* ensimmäinen merkki on ns. jokerimerkki, joka on tässä yhteydessä välttämätön - jokerimerkki on yleinen tapa eri tietokonesovelluksissa */
*.muu {color:blue;} /* tässä tapauksessa jokerimerkin voi jättää pois, sillä määrittelyssä on mukana piste ja pisteen jälkeen on tällä kertaa ns. luokkavalitsin, joka selitetään edempänä */
.muu {color:blue;} /* merkitys sama kuin edellä */

Kuten edeltävistä esimerkeistä voi havaita valitsimet liittyvät ns. kuvauslohkoihin (sanan määrittely[S][Pw]). Kun kuvauslohkoon liitetään jokin valitsin, saadaan sääntö (rule), esim:

*
{font-family: Verdana, Arial, sans-serif;
font-size: 10pt;
text-align:justify;}

Seuraava käsitekaavio selvittää vielä termien välisiä suhteita (* tarkoittaa sekä yleisvalitsinta että mitä tahansa mahdollista valitsinta; kuvauslohko voi sisältää useita kuvauksia):

sääntö (rule)
kuvauslohko (declaration-block)
kuvaus (declaration)
valitsin (selector) ominaisuus (property) arvo (value)
* { font-family : Verdana, Arial, sans-serif; }

Englanninkielisessä tekstissä sääntöjä nimitetään myös sanoilla rule sets ja statements (=käsky, lause; ks. sanan määrittely[S][Pw]). Tarkasti ottaen kyse on käskylohkokoista, jolloin englanninkielisissäkin teksteissä pitäisi kirjoittaa statement-blocks or block-statements). Valitsimiin liittyvät yksinkertaiset säännöt or sääntöjoukot kertovat 1)  kohdistettavan or kohdistettavien elementtien tunnisteet sekä 2) ominaisuudet, jotka niille annetaan eli ominaisuuksien kuvauslohkon ja siinä olevat kuvaukset. Näiden perusteella selain esittää dokumentin halutulla tavalla.

Elementtityyppivalitsin

Yleisin mahdollinen määrittely on useimmiten liian kattava ja käytännössä yleisvalitsimellakin on aina jokin tarkennin. Elementtityyppitunnisteilla on seuraavaksi ylempi painoarvo. Oikeastaan hahmontunnistusperiaatekin alkaa vasta elementtityyppivalitsimista, sillä selain joutuu etsimään yksittäisiä kohteita. Siksi perusvalitsimena voidaan pitää yksinkertaista ns. elementtityyppivalitsinta (element type selector or vain type selector).

Elementtityyppivalitsimissa tunnisteena toimii tietyn elementin nimi. Esim. seuraavassa on elementtiä H2 koskeva sääntö ([M][S][Pw]):

h2 {color:#660033; background-color:#ff3; border:#660033 1px solid; font-size:17px}

CSS-säännöissä ja dokumentissa olevien elementtimerkkausten sisällä olevat elementtien nimet muodostavat toisiaan vastaavan parin.

Muista, että XML-asiakirjoissa on merkitystä sillä, käytetäänkö pieniä vai isoja kirjaimia. CSS-säännöissä ja XML-dokumentissa olevilla elementtityyppitunnisteilla täytyy olla sama kirjainkoko.

Selainkohtaisia huomautuksia:

  1. CSS3:een on lisätty XML:n nimiavaruuksista (namespace) riippuvaisia valitsimia (esim. *|*, |* ja ns|*, jossa ns on XML-nimiavaruus, johon CSS:ää sovelletaan). Ainakin yleisvalitsimeen liittyvät säännöt toimivat uusissa Mozilla Gecko (esim. Netscape 6.x+) ja Opera 7.x selaimissa.

  2. MS IE 5.x+ tukee epästandardilla tavalla XML-nimiavaruuksia (ns\elementti).


W3C: CSS3 module: W3C selectors (W3C Working Draft 26 January 2001).
[Alku]

Ryhmittäminen

Jotta samoja kuvauslohkoja ei tarvitsisi kirjoittaa useaan kertaan, niitä voidaan ryhmittää (grouping). Ryhmään voidaan koota kaikkia mahdollisia sääntöjä. Tässä yhteydessä on olennaista vain se, että yksittäiset ryhmän jäsenet erotetaan toisistaan pilkulla. Seuraavassa on muutamia ryhmittelyesimerkkejä ([M][S][Pw]):

h1,h2,h3,h4,h5,h6 {color:red;background-color:yellow;border:red 1px solid;} /* tässä ryhmässä on vain tavanomaisia elementtityyppivalitsimia, jotka erillismäärittelyjen sijaan määritellään yhtä aikaa; peräkkäiset pilkut eivät ole sallittuja eikä lista saa päättyä pilkkuun */
h1, p.red {color:red;background-color:yellow;border:red 1px solid;} /* tässä ryhmässä jälkimmäisessä on luokkatarkennin - sen sisältö selvitetään seuraavaksi */
ol li, ol li li li {color:red;background-color:yellow;border:red 1px solid;} /* tässä ryhmässä on koottu ns. hahmonsovitusperiaatteella toimivia määrittelyjä (selitän toisessa yhteydessä mitä periaatteella tarkoitetaan) */
[Alku]