22
Iepriekšējā sadaļā apskatījām, kā mainīt izskatu visiem viena tipa elementiem. Taču ko darīt, ja izmainīt vajag tikai dažus konkrētus elementus? Šeit palīgā nāk klases un identifikatori.
ID — unikāls identifikators
ID norāda uz konkrētu elementu, kas dokumentā ir tikai viens. CSS kodā ID selektors sākas ar #:
<h1 id="galvenais">Virsraksts</h1>
#galvenais {
color: #e67e22;
border-bottom: 3px solid #e67e22;
}
Klase — elementu grupa
Klasi var piešķirt vairākiem elementiem, un vienam elementam var būt vairākas klases. CSS kodā klases selektors sākas ar . (punktu):
<p class="izceltais">Pirmais teksts</p>
<p>Parasts teksts</p>
<p class="izceltais">Trešais teksts</p>
.izceltais {
background: #f0f0f0;
border-left: 4px solid #3498db;
padding: 10px;
}
Vairākas klases vienam elementam
Elements var saturēt vairākas klases, atdalītas ar atstarpi:
<div class="kaste liela sarkana">Saturs</div>
.kaste { padding: 20px; border-radius: 8px; }
.liela { font-size: 24px; }
.sarkana { background: #e74c3c; color: white; }
Kombinētie selektori
Selektorus var kombinēt, lai precīzāk atlasītu elementus:
| Selektors | Nozīme | Piemērs |
|---|---|---|
| A B | B iekšā A (jebkurā dziļumā) | nav a { ... } |
| A > B | B, kas ir tiešais A bērns | ul > li { ... } |
| A + B | B, kas seko tūlīt pēc A | h2 + p { ... } |
| A ~ B | B, kas seko pēc A (jebkurā pozīcijā) | h2 ~ p { ... } |
| A.klase | A elements ar klasi | p.svarigs { ... } |
Pseidoklases
Pseidoklases ļauj atlasīt elementus noteiktā stāvoklī:
/* Saite, kad uz tās novieto peles kursoru */
a:hover { color: #e74c3c; }
/* Apmeklēta saite */
a:visited { color: #8e44ad; }
/* Pirmais bērns */
li:first-child { font-weight: bold; }
/* Pēdējais bērns */
li:last-child { border-bottom: none; }
/* Katrs otrais elements */
tr:nth-child(even) { background: #f5f5f5; }
/* Fokusā esošs ievades lauks */
input:focus { border-color: #3498db; outline: none; }
Klašu nosaukumu labā prakse
- Nosaukumam jāapraksta elementa nozīme, nevis izskats. Labāk .brīdinājums nekā .sarkanais-teksts
- Izmanto tikai latīņu burtus, ciparus, - un _
- Paliec pie vienas valodas un viena atdalītāja stila
- Izvairies no pārāk gariem vai pārāk īsiem nosaukumiem