[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]
AihepiiriluetteloCSS-oppaan etusivuOpassivut > 5. Mikä on CSS:n prosessointijärjestys > Tunnistettavat hahmot ja tapauskohtaiset valitsimet (jakso 2/3)

Tunnistettavat hahmot ja tapauskohtaiset valitsimet

Automaattinen periytymissysteemi koskee oikeastaan vain elementtien luonnollisia sisäkkäisyyssuhteita. Luonnollisella sisäkkäisyyssuhteella tarkoitan sitä, että esim. listaelementeillä voi edelleen alilistoja, joihin automaattisesti sovitetaan CSS-ominaisuuksia. Elementtien sisäkkäisyys voi olla hyvin monitasoista eikä automaattinen periytyminen pysty luomaan kuin yleislinjat. Tarkemman kontrollin aikaansaamiseksi voidaan luoda ominaisuuksien sovittamisen vastaavuus sääntöjä. Vastaavuussäännöt luovat elementtien kanssa ikään kuin "hahmon", jolle selain pyrkii etsimään sitä vastaavan kohdan dokumentista. Tapauskohtaisia sovelluksia voisi kutsua vaikka nimellä tunnistettava hahmo (a matching pattern).

Koska tunnistettavien hahmojen tarkoitus on luoda yksilöllisiin tilanteiseen sopivia sääntöjä, CSS1 spesifikaatio kirjoittaa tapauskohtaisista valitsimista (contextual selectors), mutta nimitystä ei käytetä CSS2 spesifikaatiossa (siinä säännöt ilmaistaan käyttämällä sanoja ancestor, descendant jne.; ilmaisu tapauskohtainen valitsin on kuitenkin niin kuvaava, että suosittelen senkin käyttämistä).

Näissäkin toimintamekanismi perustuu pääosin dokumenttipuuhun ja suhteiden kuvaamiseen käytetään aiemmin selittämääni sukumetaforaa. Mutta toisin kuin automaattisessa ominaisuuksien periytymisessä, ominaisuuksia ei soviteta automaattisen mallin mukaan vaan ikään kuin avain ja lukko -periaatteella. Kontekstin mukaiset valitsimet ottavat nimensä mukaisesti huomioon ympäristön, jossa tyyli on määritelty. Määritelty tyyli on voimassa vain, mikäli elementti on oikeassa paikassa or sillä on tietty elementti vanhempana.

Itse asiassa yksinkertainen yleis- tai elementtityyppivalitsin on tunnistettava hahmo. Monimutkaisissa tunnistettavissa hahmoissa käytetään kohdistetumpia valitsimia. Erottaaksemme ne yksinkertaisista luokka- ja elementtityyppivalitsimista, tarkoitan tunnistettavalla hahmolla sellaista sääntöjä, jossa on vähintään kaksi ehtoa. Esimerkki yksinkertaisesta tunnistettavasta hahmosta ([M][S][Pw]):

table p {color:green;} /* jälkimmäistä osaa tässä säännössä kutsutaan nimellä descendant selector; määrittelyssä on huomattava, että kaarisulun eteen ei saa laittaa rivikatkoa, sillä olen todennut, että se tekee määrittelyt joskus toimimattomiksi */

Tämän säännön mukaan sellaiset kappaleet jotka ovat elementin TABLE jälkeläisiä (descendant), saavat värin green eli vihreän (kappaleet ovat elementin TD aloitus- ja päätöskoodien sisällä).

Käytän itse tämän tapaista menettelyä usein määritellessäni ei-järjestettyjä listoja (UL) ja niille erilaisia listakuvia. Käyttämällä ryhmittämistä[S][Pw], saadaan eri tason kuville yhtä aikaa sama kuvaus. Alla on esimerkki tällaisesta ratkaisusta ([M][S][Pw] - mukana on myös seuraavan esimerkin mallit):

ul li, ul li li li { /* tässä esimerkissä listan ensimmäisen ja kolmannen tason kuvat saavat vihreän listakuvan (selitän toisessa yhteydessä listoille sallittuja ominaisuuksia) */
list-style-type: disc;
list-style-image: url(pallo-vihrea.gif);
list-style-position: inside;
margin-left: -10px; }


ul li li { /* tässä esimerkissä listan toinen taso saa punaisen listakuvan; ilman lisämäärittelyä se olisi edellisen sääntöryhmän perusteella vihreä */
list-style-type: disc;
list-style-image: url(pallo-punainen.gif);
list-style-position: inside;
margin-left: -10px;}

CSS1-tason tunnistettavissa hahmoissa voidaan elementtityyppivalitsimiin lisätä luokka-tarkentimia. Tavallaan jo luokkavalitsimella tarkennettu elementtityyppivalitsin on jo sinänsä tarkoittamani tunnistettava hahmo, koska siinä samaan kohtaan annetaan kaksi ehtoa (elementti ja sille luokka). Mutta liittämällä nämä muihin elementtityyppivalitsimiin, saadaan monimutkaisempia tunnistettavia hahmoja seuraavien esimerkkien tapaan ([M][S][Pw] - mukana on myös edellisen esimerkin mallit):

ul.class li {
list-style-type: disc;
list-style-image: url(pallo-vaalea.gif);
list-style-position: inside;
margin-left: -10px;}

table.erityinen td p {color:green;} /* tämän säännön mukaan taulukkosolun sisällä oleva kappale saa värin vihreä, vain mikäli se on taulukossa, jolla on luokka erityinen. Huomaa, että luokkaa ei tarvitse määritellä, sillä se on tässä tapauksessa epäolennaista, sillä selain etsii määrittelyä taulukkosolun sisällä olevalle kappaleelle! */

Uudempi CSS määrittely tuo vielä tarkempia sovitussääntöjä. Seuraava kaavio kuvannee asiaa - (OL ja UL ovat listatyyppejä; LI tarkoittaa yksittäisiä listaelementtejä; olen yrittänyt selittää muutamin kommentein systeemiä - mieti sitä joskus kaikessa rauhassa):

 
1) li ol li /* sovitetaan seuraavassa esimerkissä kohtaan, jotka on merkitty class="a"; tämä kuuluu jo CSS1 määrittelyihin ja suosittelen toistaiseksi vain tämän tyyppisten määrittelyjen käyttämistä */
2) li ol > li /* sovitetaan seuraavassa esimerkissä kohtaan, joka on merkitty class="b" */
3) li ol > li:first-child /* sovitetaan seuraavassa esimerkissä kohtaan, joka on merkitty class="b+" */
4) li ol + ul /* sovitetaan seuraavassa esimerkissä kohtaan, joka on merkitty class="c" */
<UL>
<LI>
<OL>
<LI class="b+"></LI>
/* class="b+" on elementin OL "lapsitason" ensimmäinen lapsielementti (kyseessä on ns. first-child selector tarkennettuna :first-child pseudo-class näennäisluokalla): tälle elementille määritellyt ominaisuudet eivät koske seuraavan tason listaelementtejä eikä edes seuraavia samalla tasolla olevia listaelementtejä */
<LI class="b"></LI> /* class="b" on elementin OL toinen lapsielementti (kyseessä on ns. first-child selector): mitkään tämän tason lapsielementeille määritellyt ominaisuudet eivät koske seuraavan tason listaelementtejä */
<UL>
<LI class="a"></LI>
/* class="a"; tämä saa arvon ensimmäisen säännön mukaan, vaikka ei olekaan elementin OL ensimmäisen tason lapsi vaan vasta seuraavan tason lapsi eli "lapsenlapsi"; mikäli tällä elementillä olisi edelleen lapsia, ne saisivat tämän elementin määrittelyt */
</UL>
</LI></OL>
<UL class="c"> /* kyseessä on elementin OL jälkeen seuraavaksi löytyvä elementti UL eli saman tason sisarelementti, (kyseessähän on adjacent sibling selector) , joka määrittelee myös sitten yksittäisten lista-elementtien ulkonäön */
<LI></LI>
</UL>
</LI>
</UL>

On kuitenkin on muistettava, että tunnistettavan hahmon pituus ei yksistään ratkaise. Minulle kävi listatestiä tehdessäni virhe, kun en huomannut kaikkia sääntöjä ja niiden keskinäisiä vuorovaikutussuhteita. Seuraava esimerkki hahmottaa niitä sinulle:

li ol+ul {list-style-type: disc; /* tämän säännön tulisi muuttaa listakuva punaiseksi testatessani sitä eräällä Netscape 6.x esiversiolla */
list-style-image: url(./Css/Kuvat/pallo-punainen.gif);
list-style-position: outside;}

ul li {list-style-type: disc; /* sääntö ei jää voimaan, koska lyhyempi hahmo UL LI kumoaa sen, sillä se jatkaa edellistä määrittelyä siitä, mihin se päättyi! */
list-style-image: url(./Css/Kuvat/pallo.gif);
list-style-position: outside;}

li ol+ul li {list-style-type: disc; /* jotta ensimmäinen sääntö saadaan voimaan ja lyhyempi kumottua, ensimmäistä patteria tulee pidentää yhdellä elementillä - nyt Netscape näyttää suunnitellun kuvan! */
list-style-image: url(./Css/Kuvat/pallo-punainen.gif);
list-style-position: outside;}

Kaikista tarkimmat tunnistettavat hahmot voisi luoda yhdistämällä elementtityyppi- ja attribuuttivalitsimia[S][Pw].

Selainkohtaisia huomautuksia:

  1. MS IE ei tue mitään CSS2-tason tuomaa uutta tunnistettavaa hahmoa.

  2. Vain Mozilla Gecko ja Opera 7.x+ -selaimet tukevat kaikkia tällä sivulla mainittuja tunnistettavia hahmoja mukaan luettuna :first-child näennäisluokan ja attribuuttivalitsimet (voit katsa virhesivulta mallilistan[S][Pw] siitä, miten valitsinten tulisi toimia).

  3. Opera 3.6x eli tue .class p {...}. kaltaisia sääntöjä.

  4. Opera 3.6x+ tukee OL > LI {...} kaltaisia sääntöjä.

  5. Opera 5.x-6.x -selaimet tukevat myäs osittain tai täysin OL + UL {...} kaltaisia sääntöjä.

  6. Opera 4.x+ -selaimet tukevat attribuuttivalitsimia.

[Alku]