Css kombinirani selektori : Online tečaj (css) : Bartol plus

Lekcija 1: Uvod u css, selektori i boje

Uvod u css [css] Umetanje css stilova u html kôd [css] Osnovni css selektori [css] Kombinirani css selektori [css] Css boja teksta i pozadine [css] Vježba 1.1: Osnovni css selektori Vježba 1.2: Kombinirani css selektori Vježba 1.3: Css promjena boje teksta i pozadine

Svaki html dokument možemo promatrati kao stablo. Html elemente u stablu možemo opisati, kao što opisujemo obiteljsko stablo. Postoje html elementi predci, potomci, roditelji, djeca i braća.

Imate li problema s nazivima potomak i predak? Više o njima ćete saznati, ako pročitate članak o obiteljskom stablu strukture. Možete ga otvoriti pomoću donje poveznice:

Html obiteljsko stablo strukture [html]

Uporabit ćemo jednostavan html dokument kao primjer. <html> i <head> element su izbačeni zbog pojednostavljenja.

<body>
  <div id="sadrzaj">
    <p>Odlomak 1</p>
    <p>Odlomak 2</p>
    <div>Kutija</div>    
    <p>Odlomak 3</p>
  </div>
  <div id="izbornik">
    <ul>
      <li>Stavka 1</li>
      <li>Stavka 2</li>
      <ol>
        <li>Podstavka 1</li>
        <li>Podstavka 2</li>
      </ol>
      <li>Stavka 3</li>
    </ul>
  </div>
</body>

Sljedeći dijagram prikazuje ovaj html dokument u obliku stabla:

Selektor potomaka (engl. descendant)

Potomci nekog elementa, su elementi koji su u odnosu na taj element - u dijagramu - na nekoj nižoj razini, bez obzira koliko je to razina niže. Potomci nekog elementa su svi elementi koji su ugniježđeni unutar tog elementa.

U desnoj grani potomci elementa <div> su, element <ul> u prvoj razini, elementi <li>, <li>, <ol> i <li> u drugoj razini i elementi <li> i <li> u trećoj razini.

Predak je element koji je u odnosu na elemente s kojim je povezan - u dijagramu - na višoj razini, bez obzira koliko je to razina više.

Selektor potomaka koristimo tako da najprije stavimo selektor pretka, zatim umećemo znak ' ' (razmak) i na kraju selektor potomka.

Želimo li odabrati sve elemente stavki popisa <li> koji su potomci elementa <div> i promijeniti njihovu boju pozadine u boju plavoljubičastu (engl. blueviolet) koristimo selektor potomaka:

div li {
  background-color: blueviolet;
}

U donjem dijagramu plavom bojom su označeni elementi koje odabire selektor div li. Dakle sve elemente <li> koji su potomci elementa <div>.

U sljedećem primjeru koristimo selektor potomaka, kako bi odabrali sve stavke popisa <li> (neovisno o tome jesu li to stavke simboličkog ili brojčanog popisa) koje su potomci elementa <div> i pomoću stilskih pravila, mijenjamo njihovu boju pozadine (css svojstvo background-color), širinu rubnice (css svojstvo margin) i širinu odmaka (css svojstvo padding).

Css selektor potomaka

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Selektor potomaka</title>
  <style>
body {
  margin: 20px;
  background-color: lavender;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

div li {
  padding: 20px;
  margin: 20px;
  background-color: blueviolet;
}
  </style>
</head>  
<body>
  <div id="sadrzaj">
    <p>Odlomak 1</p>
    <p>Odlomak 2</p>
    <div>Kutija</div>    
    <p>Odlomak 3</p>
  </div>
  <div id="izbornik">
    <ul>
      <li>Stavka 1</li>
      <li>Stavka 2</li>
      <ol>
        <li>Podstavka 1</li>
        <li>Podstavka 2</li>
      </ol>
      <li>Stavka 3</li>
    </ul>
  </div>
</body>
</html>

Selektor djece (engl. child) >

Dijete je element koji se nalazi - u dijagramu - neposredno jednu razinu ispod html elementa u stablu. U donjem dijagramu plavom bojom su označeni elementi <li> koji su djeca elementa <ul>. Svi elementi <li> - u ovom dijagramu - NISU djeca elementa <ul>, nego samo oni koji su jednu razina ispod roditelja.

Roditelj je element koji se nalazi - u dijagramu - neposredno jednu razinu iznad elementa djeteta u stablu.

Selektor djece koristimo tako da najprije stavimo selektor roditelja, zatim umećemo znak '>' i na kraju selektor djece.

Želimo li odabrati sve elemente stavki popisa <li> koji su djeca elementa simboličkog popisa <ul> i promijeniti njihovu boju pozadine u boju plavoljubičastu (engl. blueviolet) koristimo selektor djece >:

ul > li {
  background-color: blueviolet;
}

U donjem dijagramu plavom bojom su označeni elementi koje odabire selektor ul > li. Dakle samo oni elementi <li> koji su djeca elementa <ul>.

U sljedećem primjeru koristimo selektor djece >, kako bi odabrali samo one stavke popisa <li> koji su djeca elementa <ul> i pomoću stilskih pravila, promijenili njihovu boju pozadine (css svojstvo background-color).

Css selektor djece

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Selektor potomaka</title>
  <style>
body {
  margin: 20px;
  background-color: lavender;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

li {
  padding: 20px;
  margin: 20px;
}

ul > li {
  background-color: blueviolet;
}
  </style>
</head>  
<body>
  <div id="sadrzaj">
    <p>Odlomak 1</p>
    <p>Odlomak 2</p>
    <div>Kutija</div>    
    <p>Odlomak 3</p>
  </div>
  <div id="izbornik">
    <ul>
      <li>Stavka 1</li>
      <li>Stavka 2</li>
      <ol>
        <li>Podstavka 1</li>
        <li>Podstavka 2</li>
      </ol>
      <li>Stavka 3</li>
    </ul>
  </div>
</body>
</html>

Elementi braće i sestara (engl. sibling) ili kraće braće

Braća i sestre su elementi koji imaju istog roditelja.

Tako su npr. u našem dijagramu, u lijevoj grani, elementi <p>, <p>, <div> i <p> braća, jer imaju istog roditelja – element <div>. U desnoj grani su elementi <li>, <li>, <ol> i <li> braća, jer imaju istog roditelja – element <ul>. Također, u desnoj grani - ispod - su dva elementa <li> braća, jer imaju istog roditelja, element <ol>.

Selektor opće braće (engl. general sibling) ~

Braća su elementi koji imaju istog roditelja.

Selektor opće braće koristimo, kada želimo odabrati elemente koji slijede prvi selektor, a djeca su istog roditelja. Možemo ga koristiti za odabir skupine elemenata koji dijele istog roditelja.

Selektor opće braće koristimo tako da najprije stavimo selektor prvog brata, zatim umećemo znak '~' i na kraju selektor braće koju odabiremo.

Koristan je kada želimo selektirati braću, čak i onu koja ne slijede neposredno iza selektora prvog brata.

Želimo li odabrati svu braću elementa odlomaka <p>, koji slijede element odlomka <p> i promijeniti njihovu boju pozadine u boju plavoljubičastu (engl. blueviolet) koristimo selektor opće braće:

p ~ p {
  background-color: blueviolet;
}

U donjem dijagramu plavom bojom su označeni su elementi koje odabiru - u lijevoj grani selektor p ~ p, a u desnoj grani ol ~ li.

U sljedećem primjeru koristimo dva selektora opće braće - prvi - pomoću kojega odabiremo sve odlomke <p> koji su braća elementa odlomaka <p> i - drugi - pomoću kojega odabiremo sve stavke popisa <li>, koji su braća elementa <ol>. Pomoću stilskih pravila, mijenjate njihovu boju pozadine (css svojstvo background-color).

Css selektor opće braće

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Selektor opće braće</title>
  <style>
body {
  margin: 20px;
  background-color: lavender;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

p, li {
  padding: 20px;
}

p ~ p {
  background-color: blueviolet;
}

ol ~ li {
  background-color: blueviolet;
}
  </style>
</head>  
<body>
  <div id="sadrzaj">
    <p>Odlomak 1</p>
    <p>Odlomak 2</p>
    <div>Kutija</div>    
    <p>Odlomak 3</p>
  </div>
  <div id="izbornik">
    <ul>
      <li>Stavka 1</li>
      <li>Stavka 2</li>
      <ol>
        <li>Podstavka 1</li>
        <li>Podstavka 2</li>
      </ol>
      <li>Stavka 3</li>
    </ul>
  </div>
</body>
</html>

Selektor sljedećeg brata (engl. adjacent sibling) +

Braća su elementi koji imaju istog roditelja.

Css selektor sljedećeg brata koristimo, kada želimo odabrati samo onaj element koji izravno slijedi prvi selektor, a djeca su istog roditelja.

Selektor sljedećeg brata koristimo tako da najprije stavimo selektor prvog brata, zatim umećemo znak '+' i na kraju selektor sljedećeg brata.

Želimo li odabrati element odlomaka <p>, koji se nalazi neposredno iza drugog elementa odlomka <p> i promijeniti njegovu boju pozadine u boju plavoljubičastu (engl. blueviolet) koristimo selektor sljedećeg brata:

p + p {
  background-color: blueviolet;
}

U donjem dijagramu plavom bojom su označeni elementi koje odabiru - u lijevoj grani selektor p + p, a u desnoj grani li + li.

Css selektor sljedećeg brata

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Selektor sljedećeg brata</title>
  <style>
body {
  margin: 20px;
  background-color: lavender;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

p, li {
  padding: 20px;
}

p, li {
  padding: 20px;
}

p + p {
  background-color: blueviolet;
}

li + li {
  background-color: blueviolet;
}
  </style>
</head>  
<body>
  <div id="sadrzaj">
    <p>Odlomak 1</p>
    <p>Odlomak 2</p>
    <div>Kutija</div>    
    <p>Odlomak 3</p>
  </div>
  <div id="izbornik">
    <ul>
      <li>Stavka 1</li>
      <li>Stavka 2</li>
      <ol>
        <li>Podstavka 1</li>
        <li>Podstavka 2</li>
      </ol>
      <li>Stavka 3</li>
    </ul>
  </div>
</body>
</html>

U donjem dijagramu plavom bojom su označeni elementi koje odabiru - u lijevoj grani selektor div + p, a u desnoj grani ol + li.

Css selektor sljedećeg brata 2

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Selektor sljedećeg brata 2</title>
  <style>
body {
  margin: 20px;
  background-color: lavender;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

p, li {
  padding: 20px;
}

div + p {
  background-color: blueviolet;
}

ol + li {
  background-color: blueviolet;
}
  </style>
</head>  
<body>
  <div id="sadrzaj">
    <p>Odlomak 1</p>
    <p>Odlomak 2</p>
    <div>Kutija</div>    
    <p>Odlomak 3</p>
  </div>
  <div id="izbornik">
    <ul>
      <li>Stavka 1</li>
      <li>Stavka 2</li>
      <ol>
        <li>Podstavka 1</li>
        <li>Podstavka 2</li>
      </ol>
      <li>Stavka 3</li>
    </ul>
  </div>
</body>
</html>

Možda će vas zanimati?

Prethodi Osnovni css selektori Slijedi Css boja teksta i pozadine

Vježba 1.2: Kombinirani css selektori

Kombinirani CSS selektori

Razlikujemo kombinirane selektore potomaka, djece, opće braće i selektor sljedećeg brata. CSS selektori određuju kako će web preglednik prikazati web stranicu.

Selektor potomaka (engl. descendant)

Selektor djece (engl. child) >

Elementi braće i sestara (engl. sibling) ili kraće braće

Selektor opće braće (engl. general sibling) ~

Selektor sljedećeg brata (engl. adjacent sibling) +

Možda će vas zanimati?

Naši pokrovitelji

Naša preporuka

Besplatne usluge: