CSS:ssä voit valita elementtejä, class ja id käyttää tyylejä ja mukauttaa elementtejä verkkosivullasi. Tässä on yksityiskohtainen opas niiden käyttöön:
Elementtien valinta
Jos haluat valita tietyn HTML-elementin kaikki esiintymät, käytä elementin nimeä valittimena. p Valitsee esimerkiksi kaikki <p> asiakirjan tunnisteet.
Valitseminen Class
Jos haluat valita saman luokan elementtejä, käytä pistettä "." perässä luokan nimi. Valitsee esimerkiksi .my-class kaikki elementit luokassa my-class.
Voit valita elementtejä, joissa on useita luokkia, käyttämällä pisteitä "." ja luettele luokkien nimet välilyönneillä erotettuina. Valitsee esimerkiksi .class1.class2 elementtejä molemmilla class1 ja class2 luokilla.
Valitseminen id
Jos haluat valita tietyn elementin sen perusteella id, käytä hash-merkkiä "#" ja sen jälkeen elementin id. Valitsee esimerkiksi #my-id elementin id my-id.
Yhdistämällä Element, Class, ja ID valinnat
Voit yhdistää elementti-, class, ja id -valintoja kohdistaaksesi tiettyihin elementteihin tiettyihin luokkiin ja ID.
div.my-class#my-id Valitsee esimerkiksi <div> elementin näppäimillä class my-class ja ID my-id.
Tässä on erityinen esimerkki elementtien valinnasta, class ja id CSS:ssä:
/* Select all <p> tags */
p {
color: blue;
}
/* Select elements with the class "my-class" */
.my-class {
background-color: yellow;
}
/* Select the element with the ID "my-id" */
#my-id {
font-weight: bold;
}
/* Combine element, class, and ID selections */
div.my-class#my-id {
border: 1px solid black;
}
Käyttämällä element, class, ja id-valintoja voit helposti valita ja tyylittää tiettyjä elementtejä tai elementtiryhmiä Web-sivullasi.