Thuộc tính CSS Counter

Để hiển thị dạng chỉ mục số có phân cấp như trong phần mục lục của một cuốn sách, bạn có thể sử dụng thuộc tính counter-increment để thực hiện mục đích này. Ở đây, counter được gia tăng thêm 1 (hoặc tùy vào bạn thiết lập) mỗi khi phần tử đã chọn xuất hiện. Giá trị mặc định cho sự tăng thêm này (ý nghĩa của từ increment trong tên thuộc tính) là 1.

Counter tăng số tự động

CSS counter giống như biến trong lập trình. Giá trị của biến tăng theo quy luật của CSS.

Để làm việc CSS counter chúng ta sử dụng các thuộc tính sau:

• counter-reset : Tạo Counter hoặc Reset lại counter
• counter-increment: Tăng giá trị counter
• content - Chèn nội dung vào counter
• counter() or counters() function - Thêm giá trị của counter vào thành phần.

Để sử dụng CSS counter, trước tiên phải tạo biến couter-reset.
Ví dụ:Tạo trang web có counter, tăng giá trị của counter cho thẻ<h2> và chèn thêm nội dung "Section <value of the counter>:"

body {
    counter-reset: section;
}

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

Xem ví dụ

Nesting Counters

Để hiển thị dạng chỉ mục số có phân cấp như trong phần mục lục của một cuốn sách. Ta dùng một counter gọi là Nesting Counters

Ví dụ:

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) " ";
 }

Xem ví dụ

Ví dụ: Chúng ta sử dụng các hàm counters () để chèn một chuỗi giữa các mức khác nhau của các lồng nhau lồng nhau:

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

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

Xem ví dụ