[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]
Aihepiiriluettelo > CSS-oppaan etusivu > Opassivut > 4. Mitä ovat valitsimet, luokat ja id-attribuutit > Näennäisluokat ja -elementit (jakso 3/4)

Näennäisluokat ja -elementit

Aiheet

Toimintaperiaate

Näiden luokkien määrittelyt on luotu siksi, että mitkään tavanomaiset dokumenttipuuhun[S][Pw] perustuvat määrittelyt eivät toimi tietyissä tilanteissa. Siksi on luotu kaksi apukäsitettä, jotka muistuttavat normaaleja tyyppi- ja luokkamäärittelyjä. Koska ne eivät kohdistu lähdekoodissa nähtävään kokonaiseen elementtiin (kuten <P></P>), ne ovat tavallaan fiktiivisiä. Niitä nimitetään siksi näennäiselementeiksi ja -luokiksi.

Pseudo-class on apukäsite, joka CSS:ssä mahdollistaa elementtien luokittelun samaan tapaan kuin luokkien avulla, mutta joissakin tapauksissa HTML-dokumentin ulkopuolisiin seikkoihin perustuen (esim. sen mukaan, onko linkkiä seurattu vai ei).

Pseudo-element on apukäsite, jolla CSS:ssä liitetään valitsimia elementin esitysasullisiin aliosiin (kuten elementin esitysasun ensimmäiseen riviin or kirjaimeen) samaan tapaan kuin elementtityyppivalitsimia liitetään elementteihin.

Näennäisluokat

Yksinkertaiset elementtityyppivalitsimet eivät ole sidoksissa elementin sisällä oleviin attribuutteihin. Näennäisluokka liittyy aina joko todelliseen tai kuvitteelliseen attribuuttiin periaatteessa aivan samalla mekanismilla kuin class-attribuutti (muista että myös luokkavalitsin on sidottu tiettyyn attribuuttiin). Näennäisluokat tarjoavat mahdollisuuden saman elementin erilaiseen esitystapaan vaihtelevissa tilanteissa.

Erityisesti linkeillä voi olla hyvinkin monia esitystapoja eri tilanteissa ja yleisimmin tämän ryhmän määrittelyjä tapaa juuri linkeissä. Linkin olemassaolo ilmaistaan HTML-dokumenteissa attribuutilla href ja linkin tilan esitysmuoto määritellään HTML 3.2:ssa BODY elementille annetuilla link ja visited attribuuteilla. Näennäisluokat :link ja :visited antavat mahdollisuuden määritellä linkin tilan esitysmuoto ilman HTML-attribuutteja.

Linkkeihin liittyviä näennäisluokkia ovat linkkinäennäisluokat (link pseudo-classes) :link & :visited sekä dynaamiset näennäisluokat ( dynamic link pseudo-classes) :hover, :active ja :focus. Dynaamiset näennäisluokat koskevat muitakin elementtejä kuin vain ankkurielementtiä (A) ja ne liittyvät ainoastaan elementin kulloiseenkin tilaan.

W3C: CSS2: 5.11.2 The link pseudo-classes[Pw], 5.11.3 The dynamic pseudo-classes[Pw].

Linkkeihin liittyvien näennäisluokkien muoto on esim.:

a:link { color: red }
:link {color: red } /* ankkurielementtiä A ei ole tässä tapauksessa välttämätöntä merkitä HTML-asiakirjoissa, sillä selain tietää, että näitä käytetään vain ankkurielementtien yhteydessä */

Selainkohtaisia huomautuksia:

  1. Näennäisluokka :link edellyttää toimiakseen sen, että ankkurielementti sisältää attribuutin href eikä niiden pitäisi toimia pelkän elementin A kanssa. Netscape 4.0x ja Opera 3.x tukevat :link ilman href attribuuttia.

  2. Opera 3.x ja Netscape 4.x tukevat vain linkkinäennäisluokkia (:link, :visited).

  3. MS IE 4.x+ tukee :active CSS1-spesifikaation mukaan (linkkinäennäisluokan tavoin) ja :hover rajoitetusti.

  4. Opera 4.0x tukee :hover ja Opera 5.0x+ lisäksi :active (molemmat toimivat rajoitetusti).

  5. Laajin tuki on Mozilla Gecko ja Opera 7.x+ -selaimissa, jotka tukevat myös :focus. Niissä dynaamiset näennäisluokat voidaan liittää myös muihin elementteihin kuin elementtiin A. Tästä syystä pitäisi aina merkitä, mitä elementtejä dynaamiset näennäisluokat koskevat (esim. a:hover). Opera tukee :hover laajimmin, mutta :focus toimii vain lomakekontrollielementtien kanssa, mikä on mielestäni oikein sillä A vain toteuttaa tietyn tehtävän, mutta elementti ei pysy fokuksessa.

Käsittelen linkkeihin liittyvien näennäisluokkien käyttöä vielä sivulla 7[S][Pw].

Samalla periaatteella toimivat kielinäennäisluokka (:lang()). Se reagoi dokumentin kieliattribuuttiin ikään kuin se olisi luokkatarkennin.

W3C: CSS2: 5.11.4 The language pseudo-class[Pw].

Vain CSS2 -tason näennäisluokka on myös first-child pseudo-class, jonka merkintänä on :first-child. Käsittelen sen käyttötavan sekä toimivuuden sivulla Prosessointijärjestys[S][Pw]. Samassa yhteydessä käsittelen ns. adjacent sibling selector - valitsintyypin. :first-child on luokkien kaltainen apukäsite, mutta ei elementtityypin lisäksi otetaan huomioon elementin järjestys ikään kuin se loisi luokkatarkentimen. :first-child valitsee ensimmäisen saman tason samaa tyyppiä olevan elementin.

Selainkohtaisia huomautuksia:.

  1. Kielinäennäisluokka ei toimi missään selaimessa. Kieliriippuvaisia sääntöjä voidaan luoda Opera ja Mozilla Gecko -selaimille attribuuttivalitsimia käyttäen. [lang="en"] on HTML-dokumenteille sama kuin :lang(en). Kieliehto ei koske kuitenkaan XML-dokumentteja, sillä niissä käytetään xml:lang attribuuttia. Kielinäennäisluokka on siten merkintäkieliriippumaton, joten esim. :lang(en) koskee sekä xml:lang="en" että lang="en" attribuutteja.

  2. :first-child toimii vain Mozilla Gecko ja Opera 7.x+ -selaimissa.

Väännetään vielä rautalangasta malli, mitä kaikkia ainakin jossakin selaimessa toimivia tunniste- ja valitsintyyppejä yksittäisellä elementillä voi tähän mennessä käsiteltyjen valitsinten perusteella olla.

<A href="joku.hml" target="new" class="oma" id="toinen">

Tuo elementti sisältää seuraavat mahdolliset tunnistetyypit, joihin voidaan viitata CSS-säännöissä:

  1. * (* {...}) = ei erityistunniste - selain vain tunnistaa, että dokumentissa on elementtejä
  2. A (a {...}) = elementtityyppitunniste
  3. oma (.oma {...}) = luokkatunniste
  4. toinen (#toinen {...}) = id-valitsimen tunniste
  5. class, id, href, target ([class] {...} jne.) = attribuutin nimi attribuuttivalitsimen tunnisteena
  6. class="oma", id="toinen", href="joku.html", target="new" ([class="oma"] {...} jne.) = attribuutti + attribuutin arvo attribuuttivalitsimen tunnisteena
  7. a:link, a:visited (a:link {...} jne.) = tunnistus, onko linkissä vierailtu vai ei (linkit staattiset tilat)
  8. a:hover, a:active, a:focus (a:hover {...} jne.) = tunnistus, mikä on linkin mahdollinen dynaaminen tila

Näennäiselementit

Näennäiselementit eivät käytä mitään attribuuttia lisätunnistimenaan. Ne toimivat yhdessä muiden valitsinten kanssa. Jos näennäiselementti liittyy vain tiettyyn elementtityyppiin, siihen ei tarvitse liittää muita valitsimia. Koska CSS2:n mukaan :first-letter ja :first-line voidaan liittää mihin tahansa lohkoelementteihin (CSS3:n mukaan em. näennäiselementit koskevat mitä tahansa elementtiä) on tarpeen merkitä, mitä elementtiä ne koskevat. Niille voitaisiin luoda kuvitteellinen koodijono (fictional tag sequence) ja ensimmäinen voitaisiinkin korvata esim. koodisarjalla <B><BIG><FONT color="#660033"> ? </FONT></BIG></B>, mutta jälkimmäiselle sitä ei aina voi luoda, koska rivi voi katketa ei kohdista, mikäli sitä ei ole pakotettu tiettyyn leveyteen.

HTML 3.2 koodisarjat ovat hitaita luoda ja ne ovat sangen joustamattomia. Näennäiselementit ovat helppo ja joustava tapa tehdä kappaleiden ensimmäisille kirjaimille tai ensimmäiselle riville muista poikkeava esitystapa. Esim. seuraavan kuvauksen mukaan kappaleiden ensimmäinen kirjain on 120% suhteessa kappaleen muuhun tekstiin, lihavoitu ja väriltään #660033 eli violetinruskea ([M][S][Pw]):

p:first-letter {font-size:120%; font-weight:bold; color:#660033;} /* kappaleen alkukirjan */
p:first-line {font-size:110%;} /* kappaleen ensimmäinen rivi */

Selainkohtaisia huomautuksia:.

  1. Opera 3.51-3.6x, MS IE 5.5+ Windows ja MS IE 5.0+ tukevat niitä CSS1-tasoisesti. Tosin olen havainnut, että ne eivät aina toimi MS IE -selaimissa. Tekemissäni testeissä outo seikka oli se, että MS IE 6.0 Windows tuki niitä CSS-sivuillani LI mutta ei P elementeille kuten MS IE 5.5 Windows.

  2. MS IE 5.5:ssä font-size ominaisuus ei toimi p:first-letter kanssa jos kappale ala jollakin rivinsisäiselementillä. Joissakin tilanteissa fontin värin muutokset saattavat aiheuttaa virheellisen lopputuloksen. Näennäiselementtejä voi käyttää otsikkoelementtien kanssa.

  3. Jos ensimmäinen kirjain on elementti (esim. <p><cite>Alkusana<cite>) Opera 7.x hylkää kaikki sellaiset omainaisuudet, jotka ovat ristiriivassa kyseisen elementin kanssa vaikka ominaisuudet olisi merkitty näennäisluokalle :first-letter erityisen tärkeiksi (käsittelen tärkeysjärjestystä myöhemmin).

  4. Jos elementti P on määritelty käyttäytymään rivinsisäiselementtinä Opera hyväksyy p:first-letter myös tällöin vaikka sitä pitäisi soveltaa vain lohkoille.

  5. Opera 4.x+ ja Mozilla Gecko -selaimet osaavat sekä CSS1 että CSS2 tason näennäiselementtivalitsimet (:before and :after), joita käsittelen niitä myöhemmin tällä sivustolla.


W3C: CSS2: CSS2 5.12 Pseudo-elements[Pw].

[Alku]