CSS-valitsimet

CSS-valitsimia voi harjoitella hauskan pelin muodossa.

Käsitteitä

vanhempi-, äiti- tai isäelementti (engl. parent)
Elementti, jonka sisällä ko. elementti välittömästi on. 
<p>
<strong>Tämän strong-elementin äiti-elementti on p-elementti.</strong>
</p>
lapsielementti (engl. child)
Välittömästi ko. elementin sisällä oleva elementti. 
<p>
<strong>Tämä strong-elementti on p-elementin lapsi.</strong>
</p>
jälkeläinen (engl. descendant)
Ko. elementin sisällä oleva elementti. 
<p>
<strong>Tämä strong-elementti on p-elementin jälkeläinen. 
<a href="/">Tämä linkki on sekä strong-elementin, että p-elementin jälkeläinen.</a></strong>
</p>
esivanhempi, esi-isä (engl. ancestor)
Elementti, jonka jälkeläinen ko. elementti on. 
<p>Tämä p-elementti on sekä a-elementin, että strong-elementin esi-isä.
<strong>Tämä strong-elementti on a-elementin esi-isä. 
<a href="/">Tämä linkki on sekä strong-elementin, että p-elementin jälkeläinen.</a></strong>
</p>
sisarelementti (engl. sibling)
Elementit ovat sisaret, jos niillä on yhteinen vanhempielementti. 
<p>
<strong>Tämä strong-elementti ja seuraava a-elementti ovat sisarelementtejä.</strong> 
<a href="/">Tämä linkki on edellisen strong-elementin sisarelementti.</a>
</p>
edeltävä/seuraava sisarelementti (engl. preceding/following sibling)
Edeltävä elementti on dokumenttipuussa ennen ko. elementtiä, seuraava on sen jälkeen. 
<p>
<strong>Tätä strong-elementtiä seuraava elementti on a-elementti.</strong> 
<a href="/">Tätä linkkiä edeltävä elementti on strong-elementti.</a>
</p>

Lisätietoa:

Valitsimet ja näennäisluokat

Seuraavassa on esitelty lyhyiden esimerkkien avulla erilaisia CSS-valitsimia (engl. selectors) ja näennäisluokkia (engl. pseudo). Valitsimien (engl. selectors) avulla voidaan viitata HTML-dokumentissa käytettyihin rakenteisiin määrityksiin, joten ne toimivat eräällä tavalla tyylin niminä.

Tärkeimmät CSS-valitsimet
Valitsin Selitys 
*
 Valitsee jokaisen elementin. 
E
 Valitsee jokaisen elementin E. 
E F
 Valitsee elementin F, joka on elementin E jälkeläinen. 
E > F
 Valitsee elementin F, joka on elementin E lapsi. 
E:first-child
 Valitsee elementin E, jos elementti E on äitielementtinsä ensimmäinen lapsielementti. 
E + F
 Valitsee elementin F, jos se on heti elementin E jälkeen. 
E[foo]
 Valitsee elementin E, jos elementin E foo-attribuutilla on jokin arvo. Myös tyhjä käy arvoksi. 
E[foo="varoitus"]
 Valitsee elementin E, jos elementin E foo-attribuutilla on arvona varoitus. 
E[foo~="bar"]
 Valitsee elementin E, jonka ominaisuudella foo on välilyönnillä eroteltujen arvojen joukossa arvo bar. 
E.luokka
 Valitsee elementin E, jos elementin E class-attribuutin arvo on luokka. 
E#tunniste
 Valitsee elementin E, jos elementin E id-attribuutin arvo on tunniste. 
E:before
 Lisää ennen elementtiä E jotakin sisältöä. 
E:after
 Lisää elementin E jälkeen jotakin sisältöä. 
E:first-letter
 Valitsee elementin E ensimmäisen kirjaimen. 
E:first-line
 Valitsee elementin E ensimmäisen rivin. 
E[foo^="bar"]
 Valitsee elementin E, jonka ominaisuus foo alkaa merkeillä bar. 
E[foo$="bar"]
 Valitsee elementin E, jonka ominaisuus foo loppuu merkkeihin bar. 
E[foo*="bar"]
 Valitsee elementin E, jonka ominaisuuden foo arvo sisältää peräkkäiset merkit bar. 
E ~ F
 Valitsee elementin F, jos se on elementin E jälkeen (välissä voi olla muita elementtejä). 
:nth-child()
Valitsee elementin sen sijainnin perusteella
:nth-of-type()
Valitsee elementin sen tyypin ja sijainnin perusteella

CSS-Selectors

Esimerkit tärkeimmistä CSS-valitsimista
Valitsin CSS HTML 
*
 
* {
background-color: white;
}
 
E
 
h1 { color: red; }
 
<h1>Punainen otsikko</h1>
 
E F
 
ul strong { color: red; }
 
<ul><li>Tässä jotain tekstiä ja <strong>tärkeä</strong> sana.</li></ul>
 
E > F
 
ul > li > strong { color: red; }
 
<ul><li>Tässä jotain tekstiä ja <strong>tärkeä</strong> sana.</li></ul>
 
E:first-child
 
p:first-child { color: red; } 
<body><p>Tämä on ensimmäinen kappale, joka tulee punaisella.</p><p>Tämä
tulee normaalilla värillä.</p></body>
 
E + F
 
p + p { color: red; }
 
<p>Tämä on ensimmäinen kappale, joka tulee normaalilla värillä.</p><p>Tämä
tulee punaisella värillä.</p>
 
E[foo]
 
img[title] { border: 1px solid red; }
 
<p><img src="kuva.jpg" alt="foo" title="bar" /></p>
 
E[foo="varoitus"]
 
a[href="/www/"] { font-size: 1.2em; }
 
<a href="/www/">WWW-julkaiseminen</a>
 
E#tunniste
 
p#tarkein { color: red; }
 
<p id="tarkein">Tämä on sivun tärkein tekstikappale.</p>
 
E.luokka
 
p.keskitys { text-align: center; }
 
<p class="keskitys">Tämä tekstikappale on keskitetty.</p>
 
E:before
 
p:before { content: "Lue tarkkaan "; color: red; }
 
E:after
 
p:after { content: " - Antti"; color: yellow; }
 
E:first-letter
 
p:first-letter { font-size: 1.5em; }
 
E:first-line
 
p:first-line { text-transform: uppercase; }
 
:nth-of-type()
 
:nth-of-type(4n) { color: yellow; }
Muuttaa jokaisen neljännen elementin tekstivärin keltaiseksi 
p:nth-of-type(4n)
 
p:nth-of-type(4n) { color: yellow; }
Muuttaa jokaisen neljännen p-elementin tekstivärin keltaiseksi

Esimerkkejä valitsimista (esimerkissä käytetty CSS)

Esimerkkejä näennäisluokkien käytöstä

Huomio: CSS 2.1:ssä ei ole selektoreja, joilla voisi valita elementtejä niiden sisällön perusteella. Usein siis tarvitaan class- ja id-ominaisuuksia.

Listan ominaisuuksia

Listanumerointi

CSS:stä löytyviä listatyylejä ovat mm.:

Seuraavassa esimerkkejä listatyyleistä:

Automaattinen numerointi

Automaattisen numeroinnin avulla voidaan listoille tai otsikoille määritellä automaattinen numerointi. Seuraavassa esimerkki automaattisen numeroinnin käytöstä.

body {
  counter-reset: osa;   
}

h1:before {
  content: "Osa " counter(osa) ". ";
  counter-increment: osa;  
}

h1 {
  counter-reset: otsikko;     
}

h2:before {
  content: counter(osa) "." counter(otsikko) " ";
  counter-increment: otsikko;
}

h2 {
  counter-reset: alaotsikko;
}

h3:before {
  content: counter(osa) "." counter(otsikko) "." counter(alaotsikko) " ";
  counter-increment: alaotsikko;
}

Esimerkki automaattisesta numeroinnista

Taulukot

Taulukoilla on muutamia omia erikoisominaisuuksiaan.

Ominaisuus Arvot Taulukon osa johon liittyy Selitys 
caption-side
 
top | bottom | left | right
 
caption
 Määrää onko caption taulukon päällä, sivulla vai alla. 
table-layout
 
auto | fixed
 
table
 Määrittelee riippuuko taulukon koko ja ulkoasu sen sisällöstä vai ei. 
border-collapse
 
collapse | separate
 
table
 Määrää miten rajat määrätään taulukon soluille.

separate-moodissa jokaisella solulla on oma raja. Riveillä tai sarakkeilla ei voi olla rajoja.

collapse-moodissa rajat ovat yhteisiä.

 
border-spacing
 
table
 Määrää välin joka tulee yksittäisten solujen väliin, jos käytössä on separate-moodi. 
empty-cells
 
show | hide
 
td ja th
 Määrää näytetäänkö raja tyhjien solujen ympärillä.

Taulukkoesimerkki ja esimerkin CSS-koodi

Lisätietoja: Styling Tables ja A Complete Guide to the Table Element

col-elementti

Yksi hieman erikoisempi taulukoiden elementti on col. Sillä voi määritellä tiettyjä ominaisuuksia taulukon eri sarakkeille (vrt. tr-elementti riveille). Esimerkiksi voi määritellä eri sarakkeille class-attribuutin avulla oman CSS-luokan, jolle voi sitten antaa eri määrityksiä CSS-tiedostossa.

col-elementissä lopetuselementti lyhennetään suoraan aloituselementtiin, eli elementin syntaksi on <col />. col-elementit tulee sijoittaa ennen tr-elementtejä, eli heti table-elementin perään. span-attribuutin avulla voi määrätä yhden col-elementin koskemaan useampia sarakkeita. Alla on esimerkki elementin käytöstä.

Esimerkkisivu

Esimerkin koodit:

HTML:
<table>
<col class="eka_sarake" />
<col span="2" class="toka_ja_kolmas_sarake" />
<tr><td>1. rivin 1. sarakkeen 1. solu</td><td>1. rivin 2. sarakkeen 1. solu</td>
<td>1. rivin 3. sarakkeen 1. solu</td></tr>
<tr><td>2. rivin 1. sarakkeen 2. solu</td><td>2. rivin 2. sarakkeen 2. solu</td>
<td>2. rivin 3. sarakkeen 2. solu</td></tr>
</table>

CSS:
.eka_sarake {
  background-color: yellow;
}
.toka_ja_kolmas_sarake {
  background-color: green;
}

display-ominaisuus

display-ominaisuudella voidaan muuttaa esimerkiksi tekstikappaleen näkymiseen liittyviä ominaisuuksia. Tekstikappaleesta voidaan tehdä visuaalisesti osa toista tekstikappaletta tai sen näkyminen voidaan estää kokonaan. display-ominaisuudelle voidaan asettaa seuraavia arvoja.

Esimerkki keskittämisestä pystysuunnassa display-ominaisuuden avulla. Esimerkin css-koodi

Lisätietoa display-ominaisuudesta: display

Elementin koko

Peruskorkeuden määrittää aina sisällön viemä korkeus! Esim. olkoon div-elementille annettu height: 100%; ja div on suoraan bodyn sisällä. Tällöin div-elementin korkeus on 100 % vanhempielementin eli bodyn koosta. Bodyn korkeus määräytyy sen sisältämän sisällön mukaan, eli jos tekstiä on vähän, niin div:in korkeus jää pieneksi, eikä esim. koko ruudun korkeudelle.

Minimin ja maksimin määrittely elementin leveydelle ja korkeudelle

Ylivuoto, leikkaus ja näkyvyys -ominaisuudet

Seuraavassa esimerkki ominaisuuksien käytöstä

Käyttäjien kommentit

Kommentoi Lisää kommentti
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta