CSS - Selektori


Šta su selektori?

CSS selektor je obrazac koji odgovara elementima na web stranici. Pravila stila povezana s tim selektorom primijeniće se na elemente koji odgovara selektoru. Selektori su jedan od najvažnijih aspekata CSS-a, jer vam omogućuavaju ciljanje određenih elemenata na vašoj web stranici na različite načine kako bi se mogli oblikovati.



Univerzalni selektori

Univerzalni selektor su označeni zvjezdicom (*), odgovara svakom pojedinačnom elementu na stranici. Univerzalni selektor se može izostaviti ako na elementu postoje drugi uvslovi. Ovaj se selektor često koristi za uklanjanje zadanih margina i razmaka iz elemenata za brzo testiranje. Pogledajmo sljedeći primjer kako biste shvatili kako to u suštini funkcionira:

* {
    margin: 0;
    padding: 0;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Primjer CSS univerzalnih selektora</title>
  <style>
    * {
        margin: 0;
        padding: 0;
    }
  </style>
</head>
<body>
  <h1>IT TUTORIJALI</h1>
  <p>Volim da učim CSS3 i HTML5 uz IT TUTORIJALE.</p>
</body>
</html>

Pravila stila unutar selektora (*) primijeniće se na svaki element u dokumentu.



Elementi za odabir tipa selektora

Selektor tipa elementa odgovara svim instancama elementa u dokumentu s odgovarajućim nazivom vrste elementa. Pogledajmo sljedeći primjer kako biste shvatili kako to u suštini funkcionira:

p {
    color: blue;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Primjer CSS odabira tipa selektora</title>
  <style>
    h1 {
      color: red;
    }
    p {
        color: blue;
    }
  </style>
</head>
<body>
  <h1>IT TUTORIJALI</h1>
  <p>Volim da učim CSS3 i HTML5 uz IT TUTORIJALE.</p>
</body>
</html>

Pravila stila unutar p selektora primijenit će se na svaki <p> element (ili odlomak) u dokumentu i obojiti ga plavo, bez obzira na njihov položaj u stablu dokumenta.



Id selektor

Selektor id koristi se za definisanje pravila stila za jedan ili određeni element. Selektor id defiše se s hash znakom (#) odmah nakon čega slijedi vrijednost id-a.

#error {
    color: red;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Primjer CSS id selektora</title>
  <style>    
    #error {
        color: #ff0000;
    }
  </style>
</head>
<body>
  <p id="error">UPOZORENJE!!!</p>
</body>
</html>

Ovo pravilo stila pretvara tekst elementa u crvenu boju, čiji je atribut id postavljen na element error.



Class selektor

Selektori klase mogu se koristiti za odabir bilo kog HTML elementa koji ima atribut class. Svi elementi koji imaju tu klasu biće oblikovani prema definisanom pravilu. Selektor klase je definisan znakom tačka (.), odmah iza njega slijedi vrijednost klase.

.blue {
    color: blue;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Primjer CSS class selektora</title>
  <style>    
    .blue {
        color: #0000ff;
    }
  </style>
</head>
<body>
  <h1 class="blue">IT TUORIJALI</h1>
  <p class="blue">Volim učiti CSS3 uz IT TUTORIJALE.</p>
  <p>Volim učiti HTML5 uz IT TUTORIJALE.</p>
</body>
</html>

Navedeni primjer pretvara tekst u plavu boju i odnosi se na svaki elementa u dokumentu koji ima atribut class postavljen na .blue. Možete ga učiniti malo posebnijim. Na primjer:

p.blue {
    color: blue;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>primjer CSS class selektora</title>
  <style>    
    p.blue {
        color: #0000ff;
    }
  </style>
</head>
<body>
  <h1 class="blue">IT TUORIJALI</h1>
  <p class="blue">Volim učiti CSS3 uz IT TUTORIJALE.</p>
  <p>Volim učiti HTML5 uz IT TUTORIJALE.</p>
</body>
</html>

Pravilo stila unutar selektora p.blue pretvara tekst u plavu boju samo one <p> elemenata koji imaju atribut class postavljen na p.blue i ne utiču na ostale elemente.



Potomak selektor (Descendant Selectors)

Možete koristiti descendant selektore kada trebate odabrati element koji je potomak drugog elementa, na primjer, ako želite ciljati samo ona sidare koji se nalaze na popisu koji nisu naručena, a ne da ciljate sve elemente sidra. Pogledajmo kako to funkcionira:

ul.menu li a {
    text-decoration: none;
}
h1 em {
    color: green;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS Descendant selektora</title>
<style>
  h1 em {
    color: green;
  }
    ul.menu {
        padding: 0;
        list-style: none;
  }
    ul.menu li{
        display: inline;
  }
  ul.menu li a {
    margin: 10px;
    text-decoration: none;
  }
</style>
</head>
<body>
  <h1>IT <em>TUTORIJALI</em></h1>
  <ul class="menu">
    <li><a href="#">Početna</a></li>
    <li><a href="#">O nama</a></li>    
    <li><a href="#">Kursevi</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</body>
</html>

Pravila stila unutar selektora ul.menu li se primjenjuju samo na one <a> elemente koji se nalaze unutar <ul> elementa koji ima klasu .menu i ne utiču na ostale veze unutar dokumenta.



Child selektor

Child (dijete) selektor koristi se za odabir samo onih elemenata koji su direktna djeca nekog elementa. Child selektor sastoji se od dva ili više odabirača odvojenih znakom većim od - znak (>). Možete koristiti ovaj selektor, na primjer, za odabir prvog nivoa elemenata liste unutar ugniježdene liste koja ima više nivoa. Pogledajmo sljedeći primjer kako biste shvatili kako to u suštini funkcioniše:

ul > li {
    list-style: square;
}
ul > li ol {
    list-style: none;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS Child selektora</title>
<style>
  ul > li {
    list-style: square;
  }
  ul > li ol {
    list-style: none;
  }
</style>
</head>
<body>
  <ul>
    <li><a href="#">Početna</a></li>
    <li><a href="#">O nama</a></li>    
    <li>
      <a href="#">Kursevi</a>
      <ol>
        <li><a href="#">HTML5 - CSS3</a></li>
        <li><a href="#">JavaScript</a></li>
      </ol>
    </li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</body>
</html>

Pravilo stila unutar selektora ul> li primjenjuje se samo na <li> elemente koji su direktna djeca <ul> elemenata i nema uticaja na ostale elemente liste.



Susjedni potomci (Adjacent Sibling) selektori

Adjacent Sibling (Susjedni potomci) za braću mogu se koristiti za odabir elemenata sestre (tj. elemenata na istom nivou). Ovaj selektor ima sintaksu kao: E1 + E2, gdje je E2 cilj selektora. Selektor h1 + p u sljedećem primjeru odabire <p> elemente samo ako oba <h1> i <p> elementa dijele iste roditelje u stablu dokumenta i <h1> neposredno prethodi <p> elementu. To znači da će samo oni odlomci koji dolaze odmah nakon svakog <h1> naslova imati pridružena pravila stila. Ako vam je ovo nejasno, hajde na pogledamo na primjeru, kako to sve zapravo izgleda:

h1 + p {
    color: blue;
    font-size: 18px;
}
ul.task + p {
    color: #f0f;
    text-indent: 30px;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS Adjacent Sibling selektora</title>
<style>
  h1 + p {
    color: blue;
    font-size: 18px;
  }
  ul.task + p {
    color: #f0f;
    text-indent: 30px;
  }
</style>
</head>
<body>
  <h1>IT TUTORIJALI</h1>
  <p>Volim učiti CSS3 uz IT TUTORIJALE.</p>
  <p>Volim učiti HTML5 uz IT TUTORIJALE.</p>
  <ul class="task">
    <li>CSS3</li>
    <li>HTML 5</li>
    <li>JavaScript</li>
  </ul>
  <p>Učenje s nama nije mučenje.</p>
  <p>Uči i ti s najvećom IT zajednicom na Balkanu.</p>
</body>
</html>


Opšti (General Sibling) selektori

Opšti selektor sestre sličan je susjednom biraču braće (E1 + E2), ali je manje strog. Opšti izbor braće sastoji se od dva jednostavna birača odvojena znakom tilde (∼). Može se napisati kao: E1 ∼ E2, gdje je E2 cilj selektora. Selektor h1 ∼ p u primjeru odabire sve <p> elemente koji su prethodili <h1> elementu, gdje svi elementi dijele iste roditelje u stablu dokumenta.

h1p {
    color: blue;
    font-size: 18px;
}
ul.taskp {
    color: #f0f;
    text-indent: 30px;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS General Sibling selektora</title>
<style>
  h1 ~ p {
    color: blue;
    font-size: 18px;
  }
  ul.task ~ p {
    color: #f0f;
    text-indent: 30px;
  }
</style>
</head>
<body>
  <h1>IT TUTORIJALI</h1>
  <p>Volim učiti CSS3 uz IT TUTORIJALE.</p>
  <p>Volim učiti HTML5 uz IT TUTORIJALE.</p>
  <ul class="task">
    <li>CSS3</li>
    <li>HTML5</li>
    <li>JavaScript</li>
  </ul>
  <p>Učenje s nama nije mučenje.</p>
  <p>Uči i ti s najvećom IT zajednicom na Balkanu.</p>
</body>
</html>


Grupni selektori

Često nekoliko odabranih elemenata u stilu dijeli deklaracije istih pravila o stilu. Možete ih grupisati u listu odvojenu zarezom da biste minimalizirali kod u svom stilu. Takođe vas sprječava da iznova i iznova ponavljate ista pravila o stilu. Pogledajmo na primjeru:

h1 {
    font-size: 36px;
    font-weight: normal;
}
h2 {
    font-size: 28px;
    font-weight: normal;
}
h3 {
    font-size: 22px;
    font-weight: normal;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS selektora bez grupisanja</title>
<style>
  h1 {
    font-size: 36px;
    font-weight: normal;
  }
  h2 {
    font-size: 28px;
    font-weight: normal;
  }
  h3 {
    font-size: 22px;
    font-weight: normal;
  }
</style>
</head>
<body>
  <h1>IT TUTORIJALI</h1>
  <h2>Volim učiti CSS3 uz IT TUTORIJALE.</h2>
  <h3>Volim učiti HTML5 uz IT TUTORIJALE.</h3>
</body>
</html>

Kao što možete vidjeti u primjeru, ista veličina pravila font-weight: normal; dijele selektori h1, h2 i h3, tako da se može grupisati u popis odvojen zarezom, kao što je prikazano u sljedećem primjeru:

h1, h2, h3 {
    font-weight: normal;
}
h1 {
    font-size: 36px;
}
h2 {
    font-size: 28px;
}
h3 {
    font-size: 22px;
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS grupisanih selektora</title>
<style>
  h1, h2, h3 {
    font-weight: normal;
  }
  h1 {
    font-size: 36px;
  }
  h2 {
    font-size: 28px;
  }
  h3 {
    font-size: 22px;
  }
</style>
</head>
<body>
  <h1>IT TUTORIJALI</h1>
  <h2>Volim učiti CSS3 uz IT TUTORIJALE.</h2>
  <h3>Volim učiti HTML5 uz IT TUTORIJALE.</h3>
</body>
</html>