CSS selektori određuju na koje će se html elemente primjeniti stilska oblikovanja. Oni sadrže jedan ili više parova: css svojstvo - vrijednost, koji se primijenjuju na selektiranom html elementu (ili elementima) web stranice. Razlikujemo ih ovisno o načinu izbora html elementa. Tako poznajemo selektore elementa, identifikatora, klase, vrijednosti svojstva itd.
Nakon selektora, treba otvoriti vitičastu zagradu i umetnuti jedan ili više parova: css svojstvo - vrijednost. Na kraju dolazi zatvorena vitičasta zagrada.
Između svojstva i njegove vrijednosti treba staviti dvotočku :, a iza svake vrijednosti nalazi se graničnik, znak točka-zarez ;.
p {
font-size: 14px;
font-weight: 900;
}
Css selektor naziva elementa
Css selektor klase
Css selektor identifikatora
Css univerzalni selektor
Css skupni (engl. group) selektor
Selektor naziva elementa odabire html elemente pomoću naziva html elementa. Izostavljamo šiljaste zagrade (engl. angle brackets)< i >.
.U slijedećem primjeru uporabom selektora elementa body promijenjena je širina rubnice (engl. margin). To svojstvo se ne nasljeđuje i primjenjuje se samo na <body> element. Promijenjene su i vrijednosti css svojstava font-family, background-color i color. Ova css svojstva naslijeđuju svi potomci <body> elementa, tj. svi html elementi na web stranici.,
Kada nekom html elementu dodijelimo vrijednost nekog css svojstva, naslijeđena vrijednost tog css svojstva se zanemaruje.
Stavkama popisa <li> su dodijeljena css svojstva color i background-color. Zato se ne primjenjuje nasljeđivanje vrijednosti tih css svojstava, dodjeljenih selektoru elementa body.
Naslov <h1> je poravnat po sredini pomoću css svojstva text-align i zadana je debljinu slova (css svojstvo font-weight) 100, tj. najtanja slova. Svim html elementima <li> postavljena je vrijednosti širine rubnice (engl. margin) i odmaka (engl. padding) na 20px.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Selektor naziva elementa</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
color: yellow;
background-color: darkgreen;
}
h1 {
font-weight: 100;
text-align: center;
}
li {
padding: 20px;
margin: 20px;
color: lightslategray;
background-color: ivory;
}
</style>
</head>
<body>
<h1 class="posebno">Selektor naziva elementa</h1>
<div id="sadrzaj">
<p>Odlomak 1</p>
<p class="boja">Odlomak 2</p>
<div>Kutija</div>
<p>Odlomak 3</p>
</div>
<div id="izbornik">
<ul>
<li>Stavka 1</li>
<li class="boja">Stavka 2</li>
<ol>
<li class="boja">Podstavka 1</li>
<li class="posebno">Podstavka 2</li>
</ol>
<li>Stavka 3</li>
</ul>
</div>
</body>
</html>Selektor klase odabire sve html elemente koji imaju zadanu vrijednosti svojstva class.
Selektor klase sastoji se od imena klase, ispred kojega stavljamo znak točku .. Između točke i imena klase ne smije biti razmak.
Ime klase treba biti isto kao i vrijednosti svojstva class unutar html elementa (jednog ili više njih) koje želimo selektirati.
U slijedećem primjeru pomoću selektora klase .boja mijenjamo vrijednosti css svojstava padding, margin, color i background-color.
Dodjeljene vrijednosti se primjenjuju na odlomak <p>, s tekstom Odlomak 2, na stavku popisa <li> s tekstom Stavka 2 i na stavku ugniježđenog popisa <li> s tekstom Podstavka 1.
Na njih se ne primjenjuju naslijeđene vrijednosti css svojstva <body> elementa, color i background-color.
Selektor klase .posebno se primjenjuje na <h1> naslov i na stavku popisa <li> s tekstom Podstavka 2.
Niti na njih se ne primjenjuju naslijeđene vrijednosti css svojstva <body> elementa, color i background-color.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Selektor klase</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
color: yellow;
background-color: darkgreen;
}
.boja {
padding: 20px;
margin: 20px;
color: lightslategray;
background-color: ivory;
}
.posebno {
padding: 15px;
border: 2px solid yellow;
margin: 15px;
color: chocolate;
background-color: yellowgreen;
}
</style>
</head>
<body>
<h1 class="posebno">Selektor klase</h1>
<div id="sadrzaj">
<p>Odlomak 1</p>
<p class="boja">Odlomak 2</p>
<div>Kutija</div>
<p>Odlomak 3</p>
</div>
<div id="izbornik">
<ul>
<li>Stavka 1</li>
<li class="boja">Stavka 2</li>
<ol>
<li class="boja">Podstavka 1</li>
<li class="posebno">Podstavka 2</li>
</ol>
<li>Stavka 3</li>
</ul>
</div>
</body>
</html>Css selektor klase za zadani element, koristimo kada selektor klase želimo primijeniti na samo jednu vrstu html elemenata.
Selektor klase za zadani element sastoji se od naziva elementa i - neposredno iza njega - selektora klase. Između naziva elementa i selektora klase nema i ne smije biti razmaka.
Napomena: Postoji i kombinirani selektor sličan ovom selektoru, gdje se između imena elementa i selektora klase nalazi razmak. No on ima sasvim drugo značenje. Više o tome pročitajte o tome u članku o kombiniranim selektorima.
U slijedećem primjeru, pomoću selektora li.boja odabiremo samo one stavke popisa <li> s klasom .boja. Nije selektiran odlomak <p>, makar i on ima klasu .boja, (jer nije <li> element).
Također pomoću selektora h1.posebno odabiremo naslov <h1>, koji ima vrijednost svojstva klase .posebno. Nije selektirana stavka popisa <li>, makar i ona ima klasu .posebno (jer nije <h1> element).
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Selektor klase zadanog elementa</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
color: yellow;
background-color: darkgreen;
}
li.boja {
padding: 20px;
margin: 20px;
color: lightslategray;
background-color: ivory;
}
h1.posebno {
padding: 15px;
border: 2px solid yellow;
margin: 15px;
color: chocolate;
background-color: yellowgreen;
}
</style>
</head>
<body>
<h1 class="posebno">Selektor klase zadanog elementa</h1>
<div id="sadrzaj">
<p>Odlomak 1</p>
<p class="boja">Odlomak 2</p>
<div>Kutija</div>
<p>Odlomak 3</p>
</div>
<div id="izbornik">
<ul>
<li>Stavka 1</li>
<li class="boja">Stavka 2</li>
<ol>
<li class="boja">Podstavka 1</li>
<li class="posebno">Podstavka 2</li>
</ol>
<li>Stavka 3</li>
</ul>
</div>
</body>
</html>Selektor identifikatora odabire html element prema vrijednosti svojstva id.
Selektor identifikatora sastoji se od naziva identifikatora (vrijednosti svojstva id unutar html elementa) ispred kojega stavljamo znak ljestve # (engl. hash tag). Između znaka ljestve i naziva identifikatora ne smije biti razmak.
Prema savjetu W3C (engl. World Wide Web Consortium), vrijednost svojstva id na web stranici treba biti jedinstvena.
U slijedećem primjeru selektiran je html element <div> pomoću selektora identifikatora #sadrzaj. Budući kako se css svojstva color i background-color nasljeđuju, svi njegovi potomci će naslijediti vrijednost ovih css svojstava.
Ispod njega je selektiran html element <div> pomoću selektora identifikatora #izbornik. Budući kako se css svojstva color i background-color nasljeđuju, svi njegovi potomci će naslijediti vrijednost ovih css svojstava.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Selektor identifikatora</title>
<style>
body {
margin: 20px;
color: Yellow;
background-color: DarkGreen;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#sadrzaj {
margin: 20px;
padding: 20px;
color: lightslategray;
background-color: ivory;
}
#izbornik {
padding: 15px;
border: 2px solid yellow;
margin: 15px;
color: chocolate;
background-color: yellowgreen;
}
</style>
</head>
<body>
<h1 class="posebno">Selektor identifikatora</h1>
<div id="sadrzaj">
<p>Odlomak 1</p>
<p class="boja">Odlomak 2</p>
<div>Kutija</div>
<p>Odlomak 3</p>
</div>
<div id="izbornik">
<ul>
<li>Stavka 1</li>
<li class="boja">Stavka 2</li>
<ol>
<li class="boja">Podstavka 1</li>
<li class="posebno">Podstavka 2</li>
</ol>
<li>Stavka 3</li>
</ul>
</div>
</body>
</html>Univerzalni selektor * koristi se za izbor svih elemenata i njihovo oblikovanje. U našim primjerima najčešće ćemo koristiti univerzalni selektor za dodjeljivanje željene vrijednosti css svojstvima padding i margin.
Web preglednici dodjeljuju početne vrijednosti pojedinim css svojstvima. Poradi toga potrebno je css svojstvima dodijeliti početnu vrijednost, kako zadane vrijednosti web preglednika ne bi narušile željeni izgled web stranice.
Želimo li vratiti vrijednosti svih css svojstava na web stranici na null vrijednosti - koje su neovisne o web pregledniku - morate koristiti postupak, koji se zove css reset. Načina na koji se radi css reset izlazi iz opsega ovog tečaja.
U našem primjeru koristimo univerzalni selektor za dodijeljivanje vrijednosti 10px, css svojstvima padding i margin. Pomoću selektora elementa h1 dodjeljujemo css svojstvu margin vrijednost 40px.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Univerzalni selektor</title>
<style>
* {
padding: 10px;
margin: 10px;
}
body {
color: yellow;
background-color: darkgreen;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h1 {
margin: 40px;
}
p {
color: lightslategray;
background-color: ivory;
}
li {
border: 2px solid yellow;
color: chocolate;
background-color: yellowgreen;
}
</style>
</head>
<body>
<h1 class="posebno">Univerzalni selektor</h1>
<div id="sadrzaj">
<p>Odlomak 1</p>
<p class="boja">Odlomak 2</p>
<div>Kutija</div>
<p>Odlomak 3</p>
</div>
<div id="izbornik">
<ul>
<li>Stavka 1</li>
<li class="boja">Stavka 2</li>
<ol>
<li class="boja">Podstavka 1</li>
<li class="posebno">Podstavka 2</li>
</ol>
<li>Stavka 3</li>
</ul>
</div>
</body>
</html>Skupni selektor koristimo kada želimo odabrati više selektora na koja će biti primijenjena ista css svojstva. "Jednim udarcem možemo uhvatiti više muha". Redoslijed navođenja osnovnih selektora nije važan.
Skupni selektor se sastoji od više selektora koji su odvojeni zarezom. Css svojstva se primijenjuju na sve html elemente odabrane unutar svih navedenih selektora.
I kombinirane selektore možemo koristiti unutar skupnih selektora.
Uporabom skupnih selektora izbjegavate nepotrebna ponavljanja različitih selektora s istovjetnim css svojstvima.
U sljedećem primjeru prvi skupni selektor se sastoji od selektora elementa h1 i selektora klase li.boja. Drugi skupni selektor se sastoji od selektora odlomka p i selektora identifikatora #izbornik.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Skupni selektor</title>
<style>
body {
margin: 20px;
color: yellow;
background-color: darkgreen;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h1, li.boja {
padding: 20px;
margin: 20px;
color: lightslategray;
background-color: ivory;
}
p, #izbornik {
padding: 15px;
margin: 15px;
color: chocolate;
background-color: yellowgreen;
}
</style>
</head>
<body>
<h1 class="posebno">Skupni selektor</h1>
<div id="sadrzaj">
<p>Odlomak 1</p>
<p class="boja">Odlomak 2</p>
<div>Kutija</div>
<p>Odlomak 3</p>
</div>
<div id="izbornik">
<ul>
<li>Stavka 1</li>
<li class="boja">Stavka 2</li>
<ol>
<li class="boja">Podstavka 1</li>
<li class="posebno">Podstavka 2</li>
</ol>
<li>Stavka 3</li>
</ul>
</div>
</body>
</html>U složenijim web stranicama, koje imaju mnoštvo raznovrsnih selektora, isto css svojstvo je često zadano na više mjesta. Zato je potrebno znati koje će se od navedenih vrijednosti svojstva primijeniti. Slijedi objašnjenje načina izbora selektora veće težine.
Kada ima više selektora iste vrste - dakle bilo istog html elementa, bilo iste klase ili istog identifikatora - primjenit će se css svojstvo koje je posljednje zadano.
U slijedećem primjeru, iz prvog selektora odlomka p primijeniti će se css svojstva: padding, margin i background-color. Drugi selektor odlomka p poništava djelovanje prvog selektora za css svojstvo color i dodijeljuje mu svoju vrijednost.
Iz prvog selektora stavki popisa li primjeniti će se css svojstva color i background-color, dok će drugi selektor stavki popisa, odrediti nove vrijednosti css svojstava padding i margin.
Uočite kako ne koristimo selektore klase i identifikatora te zbog toga, svojstva html elementa class i id nemaju nikakvu važnost. Pogledajte!
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Težina selektora</title>
<style>
body {
margin: 20px;
color: yellow;
background-color: darkgreen;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h1 {
color: blueviolet;
font-weight: 100;
text-align: center;
}
p {
padding: 20px;
margin: 20px;
color: blue;
background-color: lemonchiffon;
}
p {
color: green;
}
li {
padding: 20px;
margin: 20px;
color: black;
background-color: ivory;
}
li {
padding: 30px;
margin: 30px;
}
</style>
</head>
<body>
<h1 id="naslov" class="posebno">Težina selektora</h1>
<div id="sadrzaj">
<p>Odlomak 1</p>
<p class="boja">Odlomak 2</p>
<div>Kutija</div>
<p>Odlomak 3</p>
</div>
<div id="izbornik">
<ul>
<li>Stavka 1</li>
<li class="boja">Stavka 2</li>
<ol>
<li class="boja">Podstavka 1</li>
<li class="posebno">Podstavka 2</li>
</ol>
<li>Stavka 3</li>
</ul>
</div>
</body>
</html>Gore navedena pravila vrijede i za višestruko navođenje selektora iste klase i identifikatora. No što se događa kada imamo za isti element više selektora, različitih vrsta?
Kada je za jedan html element višestruko definirano - pomoću različitih selektora - isto css svojstvo, primjenjuje se css svojstvo selektora veće težine. Selektor identifikatora ima najveću težinu. Slijedi selektor klase i na kraju, selektor naziva elementa.
Kada primjenjemo samo osnovne css selektore za isti html element, najveću težinu imaju svojstva zadana unutar selektora identifikatora.
Vrijednosti istih css svojstava selektora klase primjenjuje se nad html elementom, ako to isto css svojstvo nije zadano selektorom identifikatora.
Vrijednosti css svojstva zadane selektorom naziva elementa, primjenjuje se nad html elementom, samo ako to isto css svojstvo nije zadano niti selektorom identifikatora, niti selektorom klase.
Unutar skupnog selektora, pojedini selektori imaju istu težinu kao i kada su navedeni pojedinačno.
Pogledajte primjer u kojem stavljamo naglasak na css svojstvo color i promotrite što se događa s bojom teksta, kako bi primjer bio što jednostavniji.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Težina različitih selektora</title>
<style>
body {
margin: 20px;
color: yellow;
background-color: darkgreen;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#naslov {
color: gold;
}
.posebno, .boja {
color: orange;
}
h1 {
color: red;
}
p {
padding: 20px;
margin: 20px;
color: blue;
background-color: ivory;
}
li {
padding: 10px;
margin: 10px;
color: aquamarine;
background-color: chocolate;
}
</style>
</head>
<body>
<h1 id="naslov" class="posebno">Težina različitih selektora</h1>
<div id="sadrzaj">
<p>Odlomak 1</p>
<p class="posebno">Odlomak 2</p>
<div>Kutija</div>
<p>Odlomak 3</p>
</div>
<div id="izbornik">
<ul>
<li>Stavka 1</li>
<li class="boja">Stavka 2</li>
<ol>
<li class="boja">Podstavka 1</li>
<li>Podstavka 2</li>
</ol>
<li>Stavka 3</li>
</ul>
</div>
</body>
</html>Objašnjenje: Ovaj redoslijed je stavljen namjerno, radi otkrivanja pouke. Najprije selektor identifikatora, zatim klase i na kraju naziva elementa. Kada bi svi selektori imali istu važnost, primijenio bi se stil posljednjeg navedenog selektora (selektora naziva elementa). No nije tako!
Selektor identifikatora ima najveću težinu. Dakle naslov <h1> sa svojstvom id #naslov će biti ispisan zlatnom bojom (engl. gold).
Vrijednost css svojstva selektora klase .posebno, color : orange, se za <h1> element ne primjenjuje.
Također se vrijednost css svojstva selektora naziva elementa h1,color : red, ne primjenjuje.
Sljedeći po težini su selektori klase .posebno i .boja. Oni imaju veću važnost od selektora elementa.
Na odlomak koji ima klasu posebno primjenjuje se vrijednosti css svojstva color : orange dodjeljena u selektoru klase .posebno.
Na stavkama popisa koje imaju klasu boja primjenjuje se vrijednost css svojstva color : orange dodjeljena u selektoru klase .boja.
Na odlomak koji ima klasu posebno ne primjenjuje se vrijednost css svojstva color : ivory, selektora naziva elementa p.
Na stavke popisa koji imaju klasu boja ne primjenjuje se vrijednost css svojstva color : aquamarine, selektora naziva elementa li.
Na odlomak koji nema klasu posebno primjenjuje se vrijednost css svojstva color : ivory, dodjeljena u selektoru naziva elementa p.
Na svim stavkama popisa koje nemaju klasu boja, primjenjuje se vrijednost css svojstva color : aquamarine, dodjeljena u selektoru naziva elementa li.
Na ove odlomke i stavke popisa ne primjenjuje se nasljeđena vrijednosti css svojstva color : yellow dodjeljena u selektoru elementa body.
Kako bi se uvjerili da među raznovrsnim osnovnim selektorima nije bitan redoslijed njihovog navođenja - nego težina selektora - pogledajte sljedeći primjer. Isti gornji html kôd - samo je promijenjen redoslijed selektora. Djelovanje na html elemente i samim tim izgled web stranice, je isti.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Težina različitih selektora 2</title>
<style>
h1 {
color: red;
}
p {
padding: 20px;
margin: 20px;
color: blue;
background-color: ivory;
}
li {
padding: 10px;
margin: 10px;
color: aquamarine;
background-color: chocolate;
}
.posebno, .boja {
color: orange;
}
#naslov {
color: gold;
}
body {
margin: 20px;
color: yellow;
background-color: darkgreen;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1 id="naslov" class="posebno">Težina različitih selektora 2</h1>
<div id="sadrzaj">
<p>Odlomak 1</p>
<p class="posebno">Odlomak 2</p>
<div>Kutija</div>
<p>Odlomak 3</p>
</div>
<div id="izbornik">
<ul>
<li>Stavka 1</li>
<li class="boja">Stavka 2</li>
<ol>
<li class="boja">Podstavka 1</li>
<li>Podstavka 2</li>
</ol>
<li>Stavka 3</li>
</ul>
</div>
</body>
</html>Kada su - pomoću različitih selektora - zadana i ista i različita css svojstva, nad svakim html elementom pojedinačno se primjenjuje pravilo veće težine selektora, za svako pojedino css svojstvo.
CDN pohrana slika i videa.
AI povećanje slika.
Pretvorba formata slika: webp...
25Gb podataka.
Zašto ne sada?
