CSS luokka-valitsimet

CSS:ssä luokanselektorit näytetään pisteellä:

.center {text-align: center}

Yllä olevassa esimerkissä kaikki center-luokan omaavat HTML-elementit ovat keskitettyjä.

Alla olevassa HTML-koodissa h1- ja p-elementillä on center-luokka. Tämä tarkoittaa, että molemmat noudattavat ".center"-valitsimen sääntöjä.

<h1 class="center">
Tämä otsikko keskitetään.
</h1>
<p class="center">
Tämä kappale keskitetään.
</p>

Huomioitavaa:Luokan ensimmäinen merkki ei voi olla numero! Se ei toimi Mozilla tai Firefoxissa.

Kuten id:n tapauksessa, classia voidaan käyttää johdannaisselaimena:

.fancy td {
	color: #f60;
	background: #666;
	}

Tässä esimerkissä, jossakin suuremman nimeltä fancy elementin sisällä olevat taulukon solut näyttävät harmaalla taustalla oranssia tekstiä. (Suurempi elementti nimeltä fancy voi olla taulukko tai div-elementti)

Elementit voidaan myös valita niiden luokan perusteella:

td.fancy {
	color: #f60;
	background: #666;
	}

Yllä olevassa esimerkissä luokan fancy omaavat taulukosolut ovat kellanoranssi ja vaaleanruskeaa taustaa.

<td class="fancy">

Voit määrittää luokan fancy mihin tahansa taulukoelementtiin useita kertoja. Ne solut, jotka on merkitty fancy:llä, ovat kellanoranssi ja vaaleanruskeaa taustaa. Ne solut, joille ei ole määritelty nimeltä fancy olevaa luokkaa, eivät ole alttiita tälle säännölle. On myös huomattava, että luokan fancy omaavat luvut eivät ole kellanoranssi ja vaaleanruskeaa taustaa, kuten muutkin fancy-elementit, koska tämä vaikutus on rajattu vain fancy-elementteihin (eli valitaan fancy-luokan td-elementtejä).

Liittyvä sisältö

Jos tarvitset syvällisempää tietoa luokka-valitsimista, lue CodeW3C.com edistyneet opas:CSS luokka-valitsimen yksityiskohtaiset selitykset.