HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

Számlálók használata



A :before és az :after álelem kijelölők felhasználásának lehetőségeit kiterjeszti a számlálók használata.

A counter-reset tulajdonság segítségével nullázható egy számláló:

kijelölő
{
counter-reset:
:
szamlalo_neve;
}


A counter-increment tulajdonság segítségével léptethető:

kijelölő
{
counter-increment:
:
szamlalo_neve;
}


A :before álelem kijelölő felhasználásával a számozott elem előtt, az :after álelem kijelölő felhasználásával pedig a számozott elem után tudjuk megjeleníteni sorszámát.
elem:before
{
content:
:
counter(szamlalo_neve) ". "
}


Példa:

Forráskód



<style>
  body {counter-reset:szamlalo;}  
  p:before {
    counter-increment:szamlalo;
    content:"Bekezdés " counter(szamlalo) ". ";
  }      	     
</style>     
….
<body> 
  <p>A bekezdés szövege... </p>   
  <p>A bekezdés szövege... </p>  
  <p>A bekezdés szövege... </p>   
</body>
 

Eredmény*


* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_beszurt_szamlalo_01.html