Nhiều loại nội dung được thể hiện tốt nhất dưới dạng một danh sách HTML. Đối với nội dung danh sách có thứ tự, chẳng hạn như các bước trong công thức hoặc chú thích cho một bài viết, điểm đánh dấu cũng thường chứa thông tin. CSS cung cấp một số cách để kiểm soát bộ đếm trong danh sách.
Kiểu danh sách
Có nhiều loại kiểu danh sách được xác định trước hỗ trợ số, chữ cái, số La Mã và nhiều hệ thống đếm quốc tế.
Ngoài các kiểu được trình duyệt hỗ trợ, W3C đã xuất bản Các kiểu bộ đếm có sẵn, hỗ trợ thêm 181 kiểu trong 45 hệ thống chữ viết.
Nếu các lựa chọn này không phù hợp với nhu cầu của bạn, bạn cũng có thể xác định một @counter-style tuỳ chỉnh. Nhờ đó, bạn có thể chỉ định các ký hiệu tuỳ chỉnh, tiền tố và hậu tố, cũng như nhiều thông tin khác.
Theo mặc định, dấu đánh dấu mục là outside danh sách, nằm ở phía trước danh sách và căn chỉnh bên phải. Bạn cũng có thể đặt điểm đánh dấu mục bên trong danh sách bằng list-style-position: inside.
Bộ đếm
Mặc dù kiểu danh sách kiểm soát cách hiển thị các điểm đánh dấu mục trong danh sách, nhưng bộ đếm cho phép bạn kiểm soát các giá trị sẽ hiển thị. Đối với các phần tử mục danh sách <li>, trình duyệt sẽ tạo một bộ đếm có tên là list-item, bộ đếm này sẽ tăng thêm 1 cho mỗi mục danh sách gặp phải.
Bộ đếm CSS duy trì số lượng của số lần một phần tử có giá trị counter-increment tương ứng được đặt sẽ hiển thị.
Để tạo một bộ đếm mới, hãy sử dụng counter-reset cùng với tên bộ đếm và giá trị ban đầu (không bắt buộc). Bạn thường sẽ đặt thuộc tính này trên một phần tử mẹ chứa tất cả các phần tử sẽ được tính.
Sau đó, hãy thêm một thuộc tính counter-increment vào mỗi phần tử mà bạn muốn tính.
Cuối cùng, hãy hiển thị giá trị của bộ đếm bằng hàm counter().
Trong ví dụ này, chúng ta muốn hiển thị số lượng chú thích đang chạy dưới dạng văn bản liên kết cho từng chú thích. Vì chúng ta muốn có một bộ đếm duy nhất cho toàn bộ tài liệu, nên chúng ta đặt counter-reset: note trên phần nội dung và tăng dần trên mỗi đường liên kết đến chú thích.
Bạn cũng có thể có nhiều bộ đếm để đếm các mục khác nhau. Trong ví dụ về chú thích, điều gì sẽ xảy ra nếu bạn muốn hiển thị chỉ mục của phần và đoạn văn mà chú thích nằm trong đó?
Bạn có thể tạo số lượng phần trên nội dung bằng cách sử dụng counter-reset, sau đó tăng số lượng trên mỗi phần tử <h2>. Chúng ta muốn số đoạn văn được đặt lại cho mỗi phần, vì vậy, chúng ta sẽ sử dụng counter-reset trên các phần tử <h2> và tăng trên các phần tử <p>.
Cuối cùng, chúng ta kết hợp các giá trị của bộ đếm trong thuộc tính content.
a:after {
content: "(S" counter(section) "P" counter(paragraph) "N" counter(note) ")";
font-size: small;
vertical-align: super;
}
Bộ đếm lồng ghép
Điều gì xảy ra khi bạn lồng một danh sách bên trong một danh sách? Bộ đếm list-item được khởi tạo cho mỗi phần tử <ul> hoặc <ol> và việc sử dụng counter() chỉ trả về số lượng của số lượt đếm trong cùng. Nếu bạn muốn hiện số lượt đếm của từng bộ đếm lồng nhau, hãy dùng hàm counters(). Hàm này nhận tên bộ đếm và dấu phân cách.
li::marker {
content: counters(list-item, ".")
}
Bộ đếm đảo chiều
Theo mặc định, các bộ đếm (bao gồm cả bộ đếm list-item ngầm ẩn cho các phần tử <ol>) bắt đầu từ 0 và tăng thêm một cho mỗi phần tử, tức là phần tử đầu tiên sẽ được tính là 1. Nếu bạn muốn đếm ngược đến 1 thì sao?
Để làm như vậy, hãy thêm thuộc tính reversed vào <ol>. Nếu bạn đang sử dụng kiểu danh sách tiêu chuẩn, thì các điểm đánh dấu sẽ hoạt động như dự kiến. Tuy nhiên, nếu đang sử dụng một bộ đếm tuỳ chỉnh, bạn sẽ cần đặt counter-increment thành một giá trị âm và tính toán giá trị bắt đầu cho bộ đếm theo cách thủ công.