Grupisanje CSS selektora

Moguće je istovremeno definisati izgled za više selektora istovremeno, zadavanjem liste selektora. Tada se selektori navode jedan za drugim, odvojeni zarezom. Ovaj metod ima smisla ako selektori dele više zajedničkih podešavanja. Kasnije je moguće predefinisati samo one atribute po kojima se selektori razlikuju.

selektor1, selektor2, selektor3, ... { [lista deklaracija] }

Zaista, ovu tehniku najčešće koristimo u sledećem obliku:

selektor1, selektor2, ... { [zajedničke deklaracije] } selektor1 { [deklaracije specijalno za selektor 1] } selektor2 { [deklaracije specijalno za selektor 2] } ...

Dakle najpre definišemo potpuno isti izgled za više selektora, a onda ih pojedinačno modifikujemo, kako bismo dobili "slična-a-ipak-različita" CSS formatiranja.

Alternativa: lista klasa u HTML elementu

Dakle, ideja je da ne ponavljamo stalno jedan te isti niz deklaracija. Sličan efekat možemo postići i ako koristimo listu klasa u parametru class nekog HTML elementa, s tim što smo ovde ograničeni isključivo na selektore klase

.opsta-klasa { [zajedničke deklaracije] } .klasa1 { [deklaracije specijalno za klasu 1] } .klasa2 { [deklaracije specijalno za klasu 2] } ... U HTML-u bi to izgledalo ovako: <elemenat class="opsta-klasa klasa1">...</elemenat> <elemenat class="opsta-klasa klasa2">...</elemenat> ...

Primer

U ovom primeru ćemo definisati CSS pod grupom selektora: p, .klasa, div. To znači da će svi pasusi, div blokovi i svi elementi klase "klasa" imati isto formatiranje. Ovo je veoma praktično ako elementi treba da izgledaju (skoro) isto.

Div blokovi treba da se razlikuju samo u jednoj sitnici - boji slova. Zbog toga, odmah posle definicije grupe selektora, vršimo korekciju za HTML selektor div.


  <style>
    p, .klasa, div {
      font-family: sans-serif;
      background-color: #ffd;
      color: red;
    }
    
    div {
      color: blue;
    }
  </style>

  ...

  <p>Tekst u pasusu.</p>
  <section class="klasa">Tekst u section bloku klase "klasa".</section>
  <div>Tekst u div bloku.</div>
  <div class="klasa">Tekst u div bloku klase "klasa".</div>
  

U HTML-u imamo najpre tekst u pasusu i sekciju klase "klasa". Očekivano, ovi elementi će izgledati isto zahvaljujući tome što je njihov CSS definisan u grupi.

Posle toga imamo div blok. Njegova boja teksta će biti plava zbog korekcije koju smo napravili (obavezno posle definicije cele grupe), ali će zadržati sva druga podešavanja iz grupe.

Konačno, imamo i div blok klase "klasa". Za elemente klase "klasa" je definisana crvena boja teksta, ali je kasnije promenjena za div blokove u plavu. Šta mislite, koje će boje biti slova u poslednjem div bloku klase "klasa", i zašto? Pogledajte primer, da biste dobili odgovor na to pitanje.

css-sel-lista-sr
Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies). Detaljnije o tome možete pročitati u tekstu o našoj politici privatnosti.