Elementi CSS-a

Id selektori

 

Na prvi se pogled ovaj tip selektora razlikuje od klasnih selektora samo u dvije stvari. Prvo, umjesto točke definira se oznakom #:

#izreka {
font-weight: bold;
font-size: 11px;
}
#prijevod {
font-style: italic;
font-size: 12px;
}

i drugo, umjesto atributom class primjenjuje se atributom id:

<p id="izreka">Navigare necesse est,
vivere non est necesse.
</p>
<p id="prijevod">Ploviti je nužno,
živjeti nije nužno.
</p>

Rezultat je jednak prethodnom:

Navigare necesse est, vivere non est necesse.

Ploviti je nužno, živjeti nije nužno.

Vjerojatno se pitate u čemu je onda razlika između klasnog i id selektora. U jednom bi HTML dokumentu svi id atributi trebali biti različiti. Oni su namijenjeni referenciranju na određeni element. Primjerice, u dokumentu smije biti samo jedan paragraf s atributom id="izreka". Id selektor primjenjuje se kada se želi pridodati stil za jedan jedinstven element na stranici.

  • Zbog usporedbe s prethodnom lekcijom ovdje je id atribut primijenjen na paragraf čime je on oblikovan različito od ostalih.
  • Budući da smo planirali sastaviti stranicu s nizom izreka, ovakva nam definicija ne bi odgovarala. S druge strane, ona bi bila idealna ako planiramo na svaku stranicu staviti po jednu izreku s prijevodom.
     
  • Primjer s ove stranice preuredite tako, da samo izreka bude podebljana, a da završni tekst bude oblikovan kao obični odlomak.
  •  
CARNet