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    

Beágyazott számozás



A felsorolás minden szintjéhez egy-egy számlálót rendelve több szintű számozással jeleníthetjük meg, a nyomtatott könyvek tartalomjegyzékében megszokott módon.

A számlálók és a :before álelem kijelölő használatát a CSS3 kijelölők fejezetben már megismertük.

Többszintű számozásnál minden gyermekelem automatikusan egy újabb számlálót hoz létre, így nem kell az egymásba ágyazott listák minden szintjéhez újabb számláló nevet hozzárendelni.

1. Példa:

Forráskód



<style>
  ol {counter-reset:ct;
  list-style-type: none; }
  li:before {
  counter-increment:ct;
  content: counters(ct, ".") " ";}
</style>     
….
<body> 
  <ol><li>li</li>   
    <li>li
       <ol>  
         <li>li</li><li>li 
           <ol>
             <li>li</li><li>li</li>
           </ol> 
         </li> 
         <li>li</li> 
        </ol> 
     </li> 
     <li>li</li> 
  </ol> 
</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_listak_tobbszintu_szamozas_02.html