WEBnSTUDY.com
CSS

Grupisanje CSS selektora

Moguće je istovremeno definisati izgled za više selektora istovremeno. 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] }

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.

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) radi vođenja interne statistike u cilju unapređenja korisničkog iskustva. Tako prikupljeni podaci su anonimni i nedostupni trećim licima. Vaša privatnost nije ugrožena ni na koji način.