CSS id-selaimet

id-valitsin

id-valitsin voi määrittää tiettyjä tyylejä HTML-elementille, jolla on tietty id.

id-valitsin määritellään merkillä "#".

Alla olevat kaksi id-valitsinta, ensimmäinen määrittelee elementin värin punaiseksi, toinen vihreäksi:

#red {color:red;}
#green {color:green;}

Alla olevassa HTML-koodissa p-elementti, jolla on id-ominaisuus red, näkyy punaisena, ja p-elementti, jolla on id-ominaisuus green, näkyy vihreänä.

<p id="red">Tämä kappale on punainen。</p>
<p id="green">Tämä kappale on vihreä。</p>

Huomaa:id-ominaisuus esiintyy vain kerran jokaisessa HTML-dokumentissa. Haluatko tietää syyt? Katso XHTML: verkkosivuston uudelleenrakentaminen.

id-valitsin ja johdannaistavuus

Nykyisessä asetteluissa id-valitsinta käytetään usein johdannaistavuuden luomiseen.

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

Yllä oleva tyyli sovelletaan vain p-tyyppisiin elementteihin, jotka ovat id:nä sidebar sisällä olevissa elementeissä. Tämä elementti on todennäköisesti div tai taulukon solu, vaikka se voi olla myös taulukko tai muu blokki-elementti. Se voi olla myös sisäinen elementti, kuten <em></em> tai <span></span>, mutta tällainen käyttö on laillinen, koska ei voi sisällyttää <p>-elementtiä sisään <span>-elementtiin <span> (jos unohtui syy, katso) XHTML: verkkosivuston uudelleenrakentaminen）。

Yksi valitsin, monia käyttötapoja

Vaikka elementit, jotka on merkitty sidebariksi, voivat esiintyä dokumentissa vain kerran, tämä id-valitsin voidaan käyttää useita kertoja johdannaistavuutena:

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

Tässä, selkeästi erilaisesti sivun muihin p-elementteihin verrattuna, sidebarin sisäiset p-elementit saavat erityisen käsittelyn, ja samoin, selkeästi erilaisesti sivun muihin h2-elementteihin verrattuna, sidebarin h2-elementit saavat erilaisen erityiskäsittelyn.

Yksittäinen valitsin

id-selaimet voivat toimia itsenäisesti, vaikka ne eivät käytetä johdannaisselaimien luomiseen:

#sidebar {
	border: 1px punktimainen #000;
	padding: 10px;
	}

Tämän säännön mukaan id:llä sidebarin omaava elementti saa yhden pisteen leveän mustan punktimaisen reunan, ja sen ympärillä on 10 pikselin leveä sisäinen syvyys (padding, sisäinen tila). Vanhat Windows/IE-selaimet saattavat ohittaa tämän säännön, ellei määritä erityisesti valitsimen elementtiä:

div#sidebar {
	border: 1px punktimainen #000;
	padding: 10px;
	}

Liittyvä sisältö

Jos tarvitset syvällisempää tietoa ID-selaimista, lue CodeW3C.com edistyneet kurssit:CSS id-selaimen yksityiskohtainen selitys.