Bài 37: Counters – Bộ đếm trong CSS

Bộ đếm CSS là “biến” được duy trì bởi CSS mà giá trị của nó có thể được tăng lên bởi các quy tắc CSS (để theo dõi số lần chúng được sử dụng). Bộ đếm cho phép bạn điều chỉnh hình thức của nội dung dựa trên vị trí của nó trong tài liệu.

Tự động đánh số với bộ đếm

Bộ đếm CSS giống như “biến”. Các giá trị biến có thể được tăng lên bởi các quy tắc CSS (sẽ theo dõi số lần chúng được sử dụng).
Để làm việc với bộ đếm CSS , chúng ta sẽ sử dụng các thuộc tính sau:

• counter-reset – Tạo bộ đếm hoặc đặt lại bộ đếm
• counter-increment – Tăng lên giá trị bộ đếm
• content – Chèn nội dung đã tạo
• counter() hoặc hàm counters() – Thêm giá trị của bộ đếm tới một phần tử

Sử dụng bộ đếm CSS, nó phải được tạo đầu tiên với counter-reset.
Trong ví dụ này tạo bộ đếm với trang (trong thân bộ chọn), sau khi tăng giá trị bộ đếm cho mỗi phần tử <h2> và thêm nội dung “Section <value of the counter>:”  đến đầu của mỗi phần tử <h2>:

body {
counter-reset: section;
}

h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}

Bộ đếm lồng nhau

Trong ví dụ này tạo một bộ đếm cho trang (phần chính) và một bộ đếm cho mỗi phần tử <h1> (phần phụ). Bộ đếm section sẽ đếm mỗi phần tử <h1> với nội dung “Section .” và bộ đếm “subsection” sẽ đếm mỗi phần tử <h2> với nội dung “<value of the section counter>.<value of the subsection counter>”:

body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Một bộ đếm cũng có thể hữu ích để tạo danh sách được phác thảo bởi vì một phiên bản mới của bộ đếm được tự động tạo trong các phần tử con. Ở đây chúng ta sử dụng hàm counters() để chèn một chuỗi giữa các mức khác nhau của các bộ đếm lồng nhau:

ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

Tổng hợp thuộc tính bộ đếm CSS