Liczniki CSS

Podsumowanie

Liczniki w CSS zostały opisane w sekcji Automatic counters and numbering dokumentacji CSS 2.1. Wartość licznika jest ustawiana poprzez użycie własności counter-reset oraz counter-increment, natomiast wyświetlana jest przy wykorzystaniu funkcji counter() lub counters() należących do własności content.

Zastosowanie liczników

Aby użyć licznika CSS, należy najpierw ustawić mu wartość (domyślnie jest to 0) przy pomocy własności reset. Aby wyświetlić wartość licznika w danym elemencie należy skorzystać z funkcji counter(). Poniższy przykład dodaje na początku każdego elementu h1 "Sekcja wartość licznika:".

  body {
    counter-reset: sekcja;           /* Ustawienie licznika sekcja na 0 */
  }
  h1::before {
    counter-increment: sekcja;               /* Zwiększa licznik sekcja */
    content: "Sekcja " counter(sekcja) ": ";       /* Wyświetla licznik */
  }

Zagnieżdżanie liczników

Liczniki CSS mogą być szczególnie użyteczne przy listach uporządkowanych (ol), ponieważ nowa instancja licznika CSS jest automatycznie tworzona dla potomków danego elementu. Użycie funkcji counters() pozwala na dodanie ciągu znaków, który będzie oddzielał kolejne poziomy zagnieżdżonych liczników:

  ol {
    counter-reset: sekcja;                /* Tworzy nową instancję licznika
                                             sekcja w każdym elemencie ol */
    list-style-type: none;                /* Usuwa domyślnie wyświetlany licznik */
  }
  li::before {
    counter-increment: sekcja;            /* Zwiększa tylko tę instancję
                                             licznika sekcja */
    content: counters(sekcja, ".") " ";   /* Wyświetla wartości wszystkich
                                             instancji licznika sekcja,
                                             oddzielając je ciągiem ".". */
  }

Przykładowy HTML (w komentarzach podano wartość wygenerowanego licznika):

<ol>
  <li>item</li>          <!-- 1     -->
  <li>item               <!-- 2     -->
    <ol>
      <li>item</li>      <!-- 2.1   -->
      <li>item</li>      <!-- 2.2   -->
      <li>item           <!-- 2.3   -->
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
        </ol>
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
          <li>item</li>  <!-- 2.3.3 -->
        </ol>
      </li>
      <li>item</li>      <!-- 2.4   -->
    </ol>
  </li>
  <li>item</li>          <!-- 3     -->
  <li>item</li>          <!-- 4     -->
</ol>
<ol>
  <li>item</li>          <!-- 1     -->
  <li>item</li>          <!-- 2     -->
</ol>

Zobacz także

• counter-reset
• counter-increment

potrzebna treść do artykułu