T&R splet blog o spletnih storitvah. Razgaljamo tehnologijo!

reference spletnih strani
11th September

Več nivojski CSS selektorji

Nekje sem zasledil težave z večimi CSS ukazi. Recimo da ima div.novice velikost teksta določeno kot 14px, komentarji za to novice pa recimo 12px. Če nimamo vseh CSS selektorjev pravilno nastavljenih se nam lahko pripeti, da brskalnik upošteva ravno napačen CSS ukaz. V tem primeru recimo 14px. Kako rešiti težavo, da bo brskalnik upošteval tisti ukaz, ki je za posamezni primer bolj ustrezen? Beri dalje.

Obstaja več rešitev. Ena je z !important ukazom, ki ga dodamo izbranem CSS atributu, druga rešitev pa z več nivojskimi CSS selektorji. Izraz je mogoče malo neroden, vendar nisem vedel kako naj se bolje izrazim.

Več nivojski CSS selektorji za zgoraj omenjeni primer zgledajo nekako takole.

CSS:
  1. #vsebina div.clanek span.komentarji {font-size: 12px }

Tale vrstica pomeni, da naj ima span s oznako komentarji tekst v velikosti 12px samo v primeru, če se nahaja znotraj div elementa z oznako clanek in ta div.clanek znotraj kateregakoli HTML elementa, ki ima oznako id="vsebina". HTML koda bi v tem primeru izgleda takole:

HTML:
  1. <div id="vsebina">
  2.   <div class="clanek">
  3.      TEKST ČLANKA
  4.      <span class="komentarji">tekst komentarjev</span>
  5.   </div>
  6. </div>

Recimo, da imamo za element span s class komentarji (<span class="komentarji">) CSS sledeč:

CSS:
  1. .komentarji {font-size: 10px}

, kar pomeni, da imajo vsi elementi z oznako komentarji velikost pisave 10px, razen za span element, ki se nahaja znotraj člnaka, ta pa znotraj vsebine.

S tem lahko ohranimo relativno malo CSS oznak in posledično čisto HTML kodo (class), po drugi strani pa lahko priredimo posamezne za točno določeni primer HTML kode. Slaba stran tega je, če je potrebno naknadno kaj popravljati in sem nam določena kombinacija HTML kode ponovi večkrat. V tem primeru moramo pač poseči po dodatnih oznakah.

Deli s skupnostjo:

  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Podobni članki:

  1. CSS triki – selektorji za Internet Explorer
  2. Kdaj uporabiti class in kdaj id oznako za CSS selektorje
  3. Kako ohraniti pregledno strukturo CSS dokumenta
  4. CSS triki za Google CHROME brskalnik
  5. CSS 3 delovne skupine – zadnji sklepi
  6. Zaokroževanje robov s CSS ukazov
  7. Napredno programiranje v CSS s pomočjo LESS
  8. Barvni prehodi s CSS
  9. Javascript predogled slike – CSS opacity – picture preview – picture fade
  10. CSS 3 oblikovanje – ideje WebKita

Dodaj komentar