Luokka - CSS-temppuja | CSS-almanakka 2025

Luokanvalitsin CSS: ssä alkaa pisteellä (.) Seuraavasti:

.class ( )

Luokanvalitsin valitsee kaikki elementit, joilla on vastaavat luokan määritteet.

Esimerkiksi tämä elementti:

Push Me

on valittu ja muotoiltu näin:

.big-button ( font-size: 60px; )

Voit antaa luokalle minkä tahansa nimen, joka alkaa kirjaimella, väliviivalla (-) tai alaviivalla (_). Voit käyttää numeroita luokan nimissä, mutta numero ei voi olla ensimmäinen merkki tai toinen merkki yhdysmerkin jälkeen. Ellet hullu ja aloita pakenemaan valitsimia, mikä voi olla outoa:

.\3A \`\( ( /* matches elements with class=":`(" */ )

Elementillä voi olla useampi kuin yksi luokka:


 This paragraph will get styles from .intro and .blue selectors.

Elementti, jolla on useita luokkia, on tyyliltään kunkin luokan CSS-sääntöjen mukainen. Voit myös yhdistää useita luokkia elementtien valitsemiseksi:

/* only selects elements with BOTH of these classes */ .intro.blue ( font-size: 1.3em; )

Tämä esittely osoittaa, kuinka yhden luokan valitsimet eroavat yhdistetyistä valitsimista:

Voit myös rajoittaa luokan valitsimen tietyntyyppiseen elementtiin, jota joskus kutsutaan nimellä "tag qualifying":

ul.menu ( list-style: none; )

Tarkkuus

Itse luokan valitsimen spesifisyysarvo on 0, 0, 1, 0. Se on "tehokkaampaa" kuin elementinvalitsin (kuten:), a ( )mutta vähemmän tehokas kuin ID-valitsin (kuten #header ( )). Tarkkuus kasvaa, kun yhdistät luokan valitsimet tai rajoitat valitsimen tiettyyn elementtiin.

Luokkien käyttö JavaScriptillä

Voit lukea ja manipuloida elementin luokkia classListJavaScriptin avulla. Esimerkiksi luokan lisääminen voi olla esimerkiksi:

document.getElementById('italicize').classList.add('italic');

Tässä esittelyssä on esimerkkejä classListkäytöstä:

jQuery on myös menetelmiä vuorovaikutuksessa luokkiin, mukaan lukien .addClass(), .removeClass(), .toggleClass(), ja .hasClass().

Lisää tietoa

Lue luokan valitsimien W3C-määritykset.
Lisätietoja semanttisista luokkien nimistä.
Lisätietoja tarkkuudesta.
Tutustu luokkien ja tunnusten väliseen eroon.
Lisätietoja useista luokan valitsimista ja luokan / tunnuksen valitsimien yhdistelmistä.
Lisätietoja .classList-sovellusliittymästä.
Tutustu luokan manipulointiin jQueryssä.