Kako koristiti ID-selektor u CSS-u
U posljednjih nekoliko tutorijala razgovarali smo o dvije od tri vrste CSS pravila. Prva vrsta je HTML selektor koji se temelji i kontrolira stil odgovarajuće HTML oznake. Druga vrsta je selektor klase koji djeluje poput generičkog stila koji se može primijeniti na bilo koji element na web stranici.

Sada je vrijeme za raspravu o trećoj vrsti CSS pravila koje se naziva ID-selektorom. Kao i kod selektora klase, ID-selektor se može primijeniti na bilo koji element na web stranici. No pretpostavlja se da se na stranici koristi samo jednom. To omogućuje odabir ID-a vrlo korisnim za dinamički HTML i JavaScript. Teoretski, ako ID-selektor koristite više puta na stranici, web preglednik bi trebao zanemariti sljedeće. Međutim, to nije uvijek slučaj. Vrlo se teško pouzdati u predvidivost web preglednika. Stoga, kad se odlučite koristiti ID-selektor, budite oprezni da ga koristite samo jednom. Pogledajmo primjer.

Osnovni kod




. . .

Primjer




. . .



Selektor ID-a
Unutar oznaka primijetit ćete da ID izbornik započinje s hash simbolom (#), a slijedi ime koje dodijelite selektoru ID-a. Kao i kod odabirača klase, možete koristiti bilo koje ime koje želite, ali najbolje je ako ime ukazuje za što će se koristiti ID izbornik. U primjeru ga koristimo za identifikaciju posebnog odjeljka teksta.

{svojstvo: vrijednost;}
Također unutar oznaka, selektor ID-a slijedi jedan ili više parova svojstava vrijednosti koji se nalaze između zavojitih zagrada. Ovi parovi svojstva i vrijednosti određuju karakteristike stila. U primjeru, odlomak s odabirom ID-a posebne_teksta imat će tekst crvene boje.

. . .
Kad koristite ID-selektor u tijelu web stranice, upotrijebit ćete atribut id unutar početne HTML oznake. Vrijednost atributa id jedinstveno je ime koje je dodano selektoru ID-a, u ovom slučaju "posebni_tekst". (id = "vrijednost") Ovo je način na koji selektor "povezuje" stil s onom HTML oznakom na koju želite primijeniti stil. U gornjem primjeru, selektor ID bit će postavljen unutar samo jednog

oznaku na web stranici. Bilo koje druge HTML oznake na web stranici ne smiju sadržavati selektor ID-a unutar početne oznake.





Upute Video: CSS Vise o selektorima (Svibanj 2024).