Asiayhteyden mukaan määräytyvät tyylit

Asiayhteyden mukaan määräytyviä tyylejä selvennetään seuraavien esimerkkien avulla. Esimerkissä on p- ja strong-tyyli, joille on määritelty muutamia ominaisuuksia. p-tyyliä käytetään normaalikappaleiden muotoilemiseen ja strong-tyyliä käytetään erilaisten korostusten tekemiseen. strong-tyylillä kirjoitettu teksti tulee aina jonkin kappaletason elementin sisään. Seuraavassa esimerkissä jokainen strong-tyylin esiintymä on aina punainen riippumatta elementistä, jonka sisällä strong-elementtiä käytetään.

p {
background-color: white;
color: black;
text-align: justify;
}
strong {
background-color: white;
color: red;
}

Seuraavasta kuvasta on nähtävissä strong-elementillä määritellyt kohdat. Myös h1-elementin sisällä on käytetty strong-elementtiä.

Edellisessä esimerkissä ei käytetty asiayhteyden mukaan määräytyviä tyylejä. Esimerkissä asiayhteyden mukaan määräytyvänä tyylinä voitaisiin käyttää p-elementin sisällä olevien strong-elementtien sisällön värin muuttamista hopean harmaaksi. Seuraavassa esimerkissä on toteutettuna kyseinen tyyli. Tyylin nimi muodostuu nyt kahden elementin nimestä. Ensiksi annetaan sen elementin nimi, jonka sisällä toisena olevan elementin on esiinnyttävä. Esimerkkitapauksessa strong-elementti on p-elementin sisällä.

p strong {
background-color: white;
color: silver;
}
p {
background-color: white;
color: black;
text-align: justify;
}
strong {
background-color: white;
color: red;
}

Seuraavassa kuvassa on käytetty edellisen esimerkin tyylitiedoa XHTML-dokumentissa. Esimerkistä on nähtävissä, että h1-elementin sisällä oleva korostus on punainen ja p-elementin sisällä oleva korostus on hopean harmaa.

Edellä olevan esimerkin kaltaisia sisäkkäin määriteltyjä tyylejä voi olla useampiakin. Tällöin tyyli otetaan käyttöön vasta kaikkien tyyliehtojen tullessa voimaan. Seuraavassa esimerkissä on määritelty asiayhteyden mukaan määräytyvä tyyli, jonka järjestämättömän listan alkiot ovat punaisia. Tällöin XHTML-dokumentissa olevat kahden sisäkkäisen ul-elementtien sisällä olevat li-elementit eli lista-alkiot ovat vihreitä. Tällä tavoin voidaan rajata tyylin käyttö todella tapauskohtaiseksi, koska esimerkissä ainoastaan toisen tason lista-alkiot värjätään punaiseksi. Esimerkin tyylin määrittely ei vaikuta ollenkaan ensimmäisen tason lista-alkioihin.

ul ul li{
background-color: white;
color: green;
}

Seuraavassa on esimerkkinä käytetävä listan XHTML-koodi.

<ul>
<li>Listan ensimmäinen alkio</li>
<li>Listan toinen alkio
<ul>
<li>Sisemmän listan ensimmäinen alkio</li>
<li>Sisemmän listan toinen alkio</li>
<li>Sisemmän listan kolmas alkio</li>
</ul>
</li>
<li>Listan kolmas alkio</li>
</ul>

Seuraavassa kuvassa edellisen esimerkin tyylien avulla muotoiltu XHTML-dokumentti. Kuvasta on nähtävissä sisemmän listan poikkeava väri.

Seuraavan esimerkin järjestämättömän listan kaikki lista-alkiot ovat punaisia riippumatta sisäkkäisten listojen tasosta. Esimerkillä on tarkoitus osoittaa, että asiayhteyden mukaan määräytyvien tyylien määrittely huomioi ainoastaan elementtien esiintymisjärjestyksen. Tällöin sisäkkäisiä listoja voi olla monia, mutta jokainen sisäkkäinen lista esitetään punaisena, koska aiemmin aloitetut listat jätetään huomioimatta.

ul li {
background-color: white;
color: red;
}

Asiayhteyden mukaan määräytyviä tyylejä käytettäessä voidaan käyttää myös tyylien aliluokkia. Seuraavassa esimerkissä esitetään punaisella kaikki sellaiset strong-elementit, jotka ovat jonkin erikois-aliluokan esiintymän sisällä.

.erikois strong {
background-color: white;
color: red;
}

Toisessa esimerkissä esitetään punaisella sellaisten strong-elementtien sisältö, jotka ovat nimenomaan p-elementin sisällä ja joiden aliluokan nimi on erikois.

p.erikois strong {
background-color: white;
color: red;
}

Asiayhteyden mukaan määräytyviä tyylejä kannattaa käyttää aina kuin vain mahdollista koska niiden käyttäminen ei edellytä mitään muutoksia XHTML-koodiin. Monesti asiayhteyden mukaan määräytyvillä tyyleillä voi korvata useita aliluokkia joiden käyttäminen edellyttäisi sopivan class-attribuutin lisäämistä XHTML-koodiin.