[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
   
 Etsi sivuiltani: [Apua]
Aihepiiriluettelo > CSS-oppaan etusivu > Opassivut > 4. Mitä ovat valitsimet, luokat ja id-attribuutit (introjakso)

4. Mitä ovat valitsimet, luokat ja id-attribuutit

Aiheet

Tämä sivu on jaettu jaksoihin, jotka sisältävät seuraavia aiheita:

Sisältö yhtenä isona sivuna

Yleistä

CSS systeemin perustoimintaperiaate on siinä, että elementeille sovitetaan CSS-ominaisuuksia tiettyjen periaatteiden mukaan. Selaimen tulee tunnistaa elementit. Lukuun ottamatta suorien tyyliattribuuttien käyttöä selain luo elementtitunnisteista ikään kuin tunnistettavan hahmon. Perustoimintaperiaatetta nimitetäänkin hahmontunnistukseksi (pattern matching). CSS:ssä ja dokumentissa, jossa sitä käytetään tulee olla toisiaan vastaavia pareja.

Valitse

Jos esitysasu määritellään erillisillä CSS-tiedostoilla, tiedostot toimivat eräänlaisina esitysasua koskevina tietokantoina (ne vastaavat käsinkirjoitettuja tietokantoja). Ulkopuolisten CSS-tiedostojen käyttämistä voi verrata siihen, että sivun asiasisältö haetaan tietokannasta. CSS mahdollistaa siten esitysasun dynaamisen päivittämisen. Upotetussa CSS:ssä "tietokanta" kulkee asiakirjan mukana, joten se ei toteuta dynaamista päivitystä muuten kuin siten, että upotettu CSS haetaan palvelinpuolen skriptillä jostakin erillistiedostosta.

Jotta "CSS-tietokannassa" ja dokumentissa olevat parit löydettäisiin, selain tarvitsee ns. valitsimia (selectors). Ne nimensä mukaisesti valitsevat elementin tai elementit, joille CSS-ominaisuudet liitetään. Tällä sivulla käsittelen yleisimmät valitsimet ja niihin liittyvät tärkeimmät hahmonsovitussäännöt (matching rules). Alkuperäistermejä ovat mm. universal selector, (element) type selector, class selector, id selector, pseudo-class selectors ja pseudo-element selectors.

W3C: CSS2: 5 Selectors; 5.1 Pattern matching[Pw].
Muita sivustoja: Keijo Kortelainen: Valitsimet.

Käsittelen tällä sivulla myös CSS:n kanssa käytetyt erityisattribuutit class (class="...") ja id (id="..."), koska kyseisiä attribuutteja käytetään eräiden valitsimien toimintamekanismeissa.

Valitsimilla on toisiinsa nähden erisuuruisia painoarvoja (weigth), joten ne luovat toisiinsa nähden porrastetun järjestyksen (cascading order). Käsittelen tällä sivulla alustavasti tätä näkökulmaa. Sivulla 5[S][Pw] käsittelen joitakin harvinaisempia valitsimia (adjacent sibling selector - valitsintyypin + first-child pseudo-class näennäisluokkavalitsimen), koska niiden käsittely on luontevampaa toisessa yhteydessä. Käsittelen tuolla sivulla syvällisemmin, missä järjestyksessä selain lukee CSS-ominaisuudet. Kokoan siinä myös erilaiset sovitussäännöt. Nämä kaksi sivua siis kuuluvat yhteen ja esitän asiat vain hieman eri järjestyksessä kuin virallinen spesifikaatio.

[Alku]