Päivitetty: 10.03.2003.

Valitsimet

Valitsin on se (x)HTML-elementti, jolle CSS-muotoilut kohdistetaan. Valitsin voi olla yksittäinen HTML-elementti tai elementtiryhmä. Valitsin voi olla myös luokka (class) tai tunniste (id), lisäksi CSS1 tukee näennäis- eli Pseudo-valitsimia


Valitsimet

valitsin

Valitsin (Selector) on siis se (x)HTML- elementti jolle sääntö halutaan antaa. Valitsimena käytetään kyseisen HTML -elemenyin nimeä ilman <kulmasulkuja>. Esim. <P> on p ja <body> on body.

Valitsin voidaan HTML 4:n yhteydessä kirjoittaa isolla tai pienellä. Mutta xHTML- ja XML -kielten kanssa tulee käyttää pieniä kirjaimia. Onkin suositeltava käyttää pieniä kirjaimia myös HTML 4-kielessä.

Itse käytän HTML ja CSS koodissa aina pieniä kirjaimia. Käytän joissakin esimerkeissä, selvyyden takia, isoja kirjaimia.

Huomautus esimerkeistä!

Seuraavat esimerkit eivät sisällä kokonaisia HTML- tai CSS -listauksia, joten ne eivät toimi suoraan jos kopiot koodin. Jos haluat testata sääntöjä kirjoita ne kuten alla olevassa listauksessa on tehty.

<html>
 <head>
  <title>testi</title>
  <style type="text/css">
   <!-- 
      säännöt tähän
    --> 
   </style>
  </head>
 <BODY> ... </BODY>
</html> 

CSS mahdollistaa valitsimien yhdistelyn, jolloin voidaan luoda monipuolisempia sääntöjä. Lisäksi voit käyttää luokka tai tunniste valitsinta. Seuraavaksi esitellään kaikki CSS1:n tukemat valitsimet.

<< Alkuun


tyyppivalitsin

Tyyppivalitsin määrittää halutun (x)HTML-elementin muotoilun. Valitsin voi olla mikä vain HTML 4 / XHTM 1 -standardin mukainen elementti.Valitsin voi tietysti olla myös XML-standardin mukainen, muuta en käsittele asiaa siltä kannalta erikseen.

Tyyppivalitsin voi olla esim. <p> -elementti:

P { color: black }

Jos määritellään monta eri ominaisuutta pitää ne erottaa toisistaan puolipisteellä ( ; ) esim:

P {
color:black;
font-size:14pt;
margin-left:5% }

Huomaa, että viimeisen ominaisuuden jälkeen ei tarvita puolipistettä, tosin ei siitä haittaakaan ole.

Jos määritellään usealle eri elementille samat määritteet tulee elementin erottaa toisistaan pilkulla ( , ). Eli esim. säännöt

h1 { color: Green }
h2 { color: Green }
h3 { color: Green }

Voidaan kirjoittaa muotoon:

h1, h2, h3 { color: Green }

<< Alkuun


jälkeläisvalitsin

Jälkeläisvalitsimella tarkoitetaan (x)HTML-elementtiä, joka on toisen elementin sisässä ja saa vain silloin tietyn muotoilun. Tätä valitsinta kutsutaan myös kontekstin (contextual selector) mukaiseksi valitsimeksi. Vertaa kahta seuraava sääntöä:

P i { color: red } /* EI pilkkua */

P, i { color: black } /* pilkku */

Näistä ensimmäinen on jälkeläisvalitsin. Elementti <i> saa määrityksen {color: red } vain kun se esiintyy <P> -elementin sisällä, eli kun i on P:n lapsielementti. Eli HTML koodina

<P>tekstiä <i>punaista</i> tekstiä</P>

Jos <i> esiintyy muualla kuin <P> -elementin yhteydessä sen väri on musta. Jälkimmäinen sääntö on tietenkin normaali ryhmittäjä, jonka toiminta kerrottiin ylempänä.

Myös jälkeläisvalitsimia voi ryhmitellä:

P b, P i, h3 i { color: red }

Eli yllä olevat säännöt tuottavat punaista väriä, kun (x)HTML -koodi on jokin seuraavista:

<P>
 <b>punaista</b>
</P>
<P>
 <i>punaista</i>
</P>
<h3>
 <i>punaista</i>
</h3>

<< Alkuun


luokkavalitsin

Luokka (Class) on itse määritelty tyylisääntö, joka ei kohdistu suoraan mihinkään (x)HTML-elementtiin, vaan sille annetaan tietty nimi. Luokan määritys alkaa aina pisteellä ( . ), jonka jälkeen tulee luokan nimi. Esim. luokan nimi voi olla .oma_luokka.

Luokan nimi pitää alkaa, pisteen jälkee, kirjaimella a-z tai A-Z (XML käsittelee isot ja pienet kirjaimet eri merkkeinä!). Numeroita voi myös käyttää, mutta ei ensimmäisenä merkkinä.

Luokalle voidaan määritellä CSS-sääntöjä aivan kuten (x)HTML-elementeille. Luokka voidaan sitten kiinnittää haluttuihin (x)HTML-elementteihin class-attribuutilla. Luokka on voimassa elementin lopetustagiin asti.

Puhdas luokka voidaan kiinnittää mihin vain:

.oma { color:green}

<p class="oma">Teksti on vihreää</p>
<h1 class="oma"...</h1>
<h3 class="oma"...</h2>

Luokkavalitsin voidaan myös tarkentaa jollekin elementille esim:

h1.red { color:red}

Nyt luokka voidaan kytkeä vain h1-elementtiin.

<h1 class="red">...</h1>

luokan kiinnitys:

Luokka voidaan kiinnittää kolmella eri tavalla, riippuen siitä kuinka suuri alue halutaan muotoilla:

1.) Yhden elementin muotoilu

Voit kiittää tyylin mihin tahansa (x)HTML-elementtiin, käyttämällä kyseisen elementin class -attribuuttia:

<p class="oma">...</p>
<h1 class="oma">...</h1>

2.) Usean elementin muotoilu

Jos tyyli kiinnitetään esim. <DIV> -elementtiin, perivät kaikki sen sisällä olevat elementit kyseiset arvot.

<DIV class="oma">
 <H1>...</H1>
 <P>....</p>
 < mitä tahansa HTML-elementtejä>...</>
</DIV>

3.) Elementin sisällä olevan alueen muotoilu

Voit rajata vaikka vain yhden merkin käyttäen <SPAN> -elementtiä:

<p><span class="oma">T</span>ässä on tekstiä..</p>

<< Alkuun


id-valitsin

Id-valitsin muistuttaa paljolti luokkavalitsinta, mutta id-valitsin on elementin yksilöllinen tunniste. Tunnisteen avulla elementtiin voidaan viitata esim. JavaScriptissä.

Tulevaisuudessa xHTML-koodissa sitä käytetään korvaamaan <a name=""> -parametri. Tästä syystä sivulla ei saa olla useita samoja id-tunnisteita.

Id-valitsin alkaa aina 'risuaita-merkillä' ( # ), esim. #my_id. Kiinnitys tehdään id -parametrilla, tyyliin <p id="my_id">.

#a1 { color: red}

<p id="a1">...</p>

Id-tunnistetta voi käyttää myös yhtäaikaa luokan kanssa eli:

<p class="oma" id="red">...</p>

<< Alkuun


pseudo-valitsimet

Pseudo eli vale- tai näennäis -valitsin viittaa johonkin elementtiin/luokkaan jota ei voida määritellä tavalliseilla tavoilla kuten tyyppi-, class- tai id -valitsimella.

Pseudo-luokan tai -valitsimen tunnistaa kaksoispisteestä, jota edeltää esim. tyyppivalitsin (A:link).

CSS1 tukee kolmea pseudo-luokkaa (:link, :visited ja :active), jotka on tarkoitettu hyperlinkinlinkin ulkoasun määrittämiseen eri tilanteissa.

Lisäksi CSS1 tukee kahta pseudo-elementtiä (:first-line ja :first-letter), jolla määritellään elementin ensimmäinen kirjain tai rivi.

Katso esimerkkisivua.

<< Alkuun


pseudo-luokka

Perinteisesti HTML-kielessä hyperlinkkien ulkoasu on määritelty body -elementin attribuuteilla tyyliin:

<body link="#0000FF" vlink="#CCCCCC" alink="#FF0000">

CSS1 määrittää kyseiset ominaisuudet <A> -elementille, jolla on attribuutti href="" (määritys ei vaikuta pelkkiin ankkureihin eli name -attribuutteihin).

Linkin ulkoasu voi vaihdella sen mukaan mikä sen tila on (käyttämätön, käytetty vai aktiivinen). Nämä eri vaihtoehdot määritellään siis pseudolukilla:

A:link /* käyttämätöm linkki */
A:visted /* käytetty linkki */
A:active /* aktiivinen linkki */

Esimerkiksi seuraavat määritteet kertovat, että linkin väri on sininen, käytetyn linkin väri on harmaa ja aktiivisen linkin väri on punainen:

a:link { color:blue }
a:visited { color:gray }
a:active { color:red }

CSS1 pystyy määrittelemään värin lisäksi mm. fontin lajin ja koon, lihavoinnin ja kursivoinnin, taustaväri ja -kuvan, eli lähes mitä vain. Jos määrittelet CSS -ominaisuuksia pelkästään elementille A niin määritteet vaikuttavat kaikkiin pseudoluokkiin. Esim:

a { font-weight: bold }
a:link { color:blue } /* lihavoitu */
a:visited { color:gray } /* lihavoitu */
a:active { color:red } /* lihavoitu */

Sääntöjen tarkennus:

Voit myös hyödyntää jälkeläisvalitsimia, esim. määritys:

A:link IMG { border: none }

Poistaa kaikilta kuvalinkeiltä reunuksen. Vastaavasti voit käyttää luokkaa:

A.oma:link { color: red }

Jolloin määritys toimii vain kun HTML-koodissa on rivi:

<A CLASS="oma" href="www.jotain.com">...</A>

Huomaa, että CSS2 tuo lisää vaihtoehtoja (a:hover ja a:focus). Näistä lisää CSS2-opaasa kohdassa valitsimet.

<< Alkuun


pseudo-elementti

Pseudo-elementillä voidaan määrittää elementin ensimmäinen kirjain tai rivi .Esimerkiksi seuraava sääntö muuttaa P-kappaleen ensimmäisen rivin punaiseksi:

P:first-line { color: red }

Vastaavasti elementin ensimmäinen kirjain voidaan määritellä:

H5:first-letter { color: red }

Myös Pseudo-elementtiä voi käyttää jälkeläisvalitsimen kanssa. Seuraava esimerkki kohdistuu vain div-elementin sisällä olevan P-kappaleen ensimmäiseen merkkiin:

DIV P:first-letter { color: navy }

Sääntö voidaan tarkentaa myös luokalla:

P.oma:first-letter { color: navy }

<P CLASS="oma">Eka kappale</P>

<< Alkuun


© Petteri Perälä 1999 - 2003.
E-mail: [ petepe@mbnet.fi ].

Valid CSS! Valid HTML 4.01!