CSS Counters là một tính năng mạnh mẽ trong CSS, cho phép bạn tạo và quản lý bộ đếm để áp dụng vào các phần tử HTML mà không cần sử dụng JavaScript. CSS Counters đặc biệt hữu ích trong các tình huống như đánh số thứ tự cho danh sách, tiêu đề, hoặc các phần tử khác một cách tự động.

1. Tổng quan về CSS Counters

CSS Counters hoạt động thông qua việc khai báo bộ đếm, sau đó tăng giá trị của bộ đếm khi cần thiết. Cách triển khai cơ bản bao gồm ba bước:

  1. Khởi tạo bộ đếm với counter-reset.
  2. Tăng giá trị bộ đếm với counter-increment.
  3. Hiển thị giá trị bộ đếm với content và hàm counter().

Ví dụ

css
/* Khởi tạo bộ đếm */
body {
    counter-reset: section;
}

/* Tăng giá trị bộ đếm và hiển thị */
h2::before {
    counter-increment: section;
    content: "Phần " counter(section) ". ";
}

Trong ví dụ trên:

  • counter-reset: section; khởi tạo bộ đếm có tên section.
  • counter-increment: section; tăng giá trị bộ đếm mỗi khi một phần tử h2 xuất hiện.
  • content: "Phần " counter(section) ". "; hiển thị giá trị của bộ đếm section trước tiêu đề của phần.

2. Cách sử dụng CSS counters

2.1. Khởi tạo bộ đếm với counter-reset

counter-reset giúp bạn thiết lập hoặc đặt lại giá trị của bộ đếm.

css
/* Đặt lại bộ đếm tên "section" */
body {
    counter-reset: section;
}

Bạn có thể đặt lại bộ đếm bất cứ khi nào cần thiết hoặc tạo nhiều bộ đếm khác nhau trong cùng một dòng mã:

css
/* Khởi tạo hai bộ đếm */
body {
    counter-reset: section chapter;
}

2.2. Tăng giá trị bộ đếm với counter-increment

counter-increment giúp bạn tăng giá trị bộ đếm khi cần. Nếu không chỉ định giá trị, bộ đếm sẽ tăng thêm 1 mặc định. Bạn cũng có thể tăng thêm một giá trị cụ thể.

css
/* Tăng giá trị "section" và "chapter" */
h2 {
    counter-increment: section;
}
h3 {
    counter-increment: chapter 2; /* Tăng bộ đếm "chapter" lên 2 */
}

2.3. Hiển thị giá trị bộ đếm với content và counter()

counter() là hàm dùng để hiển thị giá trị của bộ đếm, và thường được kết hợp với thuộc tính content.

css
h2::before {
    content: "Phần " counter(section) ". ";
}

Ngoài counter(), bạn cũng có thể sử dụng counters() để hiển thị giá trị bộ đếm dưới dạng cấp bậc, với các phân cấp được phân tách bằng ký tự bạn chỉ định.

css
/* Ví dụ hiển thị cấp bậc */
h2::before {
    content: counters(section, ".");
}

3. Ứng dụng CSS counters

CSS Counters có thể áp dụng vào nhiều tình huống, từ đánh số cho danh sách đến tạo số thứ tự tự động cho tiêu đề hoặc các phần tử khác.

3.1. Đánh số cho danh sách

CSS Counters là cách tiện lợi để tạo danh sách đánh số tự động mà không cần sử dụng <ol>.

html
Thử online
<ul class="my-list">
    <li>Mục 1</li>
    <li>Mục 2</li>
    <li>Mục 3</li>
</ul>
css
/* Đánh số cho danh sách */
.my-list {
    counter-reset: list-item;
}

.my-list li::before {
    counter-increment: list-item;
    content: counter(list-item) ". ";
}

Kết quả sẽ là một danh sách được đánh số tự động với số thứ tự trước mỗi mục trong danh sách.

3.2. Đánh số cho các tiêu đề theo cấp bậc

CSS Counters cũng hỗ trợ đánh số cho các tiêu đề theo cấp bậc, giúp bạn dễ dàng tạo mục lục hoặc đánh số chương tự động.

html
Thử online
<h1>Chương 1</h1>
<h2>Phần 1.1</h2>
<h2>Phần 1.2</h2>
<h1>Chương 2</h1>
<h2>Phần 2.1</h2>
css
/* Đánh số cho tiêu đề theo cấp bậc */
body {
    counter-reset: chapter;
}

h1 {
    counter-increment: chapter;
    counter-reset: section;
}

h1::before {
    content: "Chương " counter(chapter) ". ";
}

h2 {
    counter-increment: section;
}

h2::before {
    content: counter(chapter) "." counter(section) " ";
}

Trong ví dụ này:

  • Mỗi h1 được xem là một chương và mỗi h2 là một phần trong chương đó.
  • Bộ đếm section sẽ đặt lại khi có một h1 mới, tạo hiệu ứng đánh số theo cấp bậc (ví dụ: 1.1, 1.2, 2.1).

4. Các tùy chọn định dạng cho CSS Counters

CSS Counters hỗ trợ nhiều kiểu định dạng khác nhau cho các bộ đếm, giúp bạn tùy biến cách hiển thị giá trị của bộ đếm.

css
/* Sử dụng chữ số La Mã và kiểu chữ */
h2::before {
    content: counter(section, upper-roman) ". ";
    font-weight: bold;
}

Một số giá trị định dạng cho bộ đếm bao gồm:

  • decimal: Số thập phân (mặc định)
  • upper-roman hoặc lower-roman: Số La Mã in hoa hoặc in thường
  • upper-alpha hoặc lower-alpha: Ký tự chữ cái in hoa hoặc in thường

5. Kết luận

CSS Counters là công cụ hữu ích và linh hoạt trong CSS, giúp bạn tạo và quản lý bộ đếm cho các phần tử HTML mà không cần dùng JavaScript. CSS Counters giúp mã HTML và CSS gọn gàng hơn, dễ bảo trì và trực quan hơn khi làm việc với các phần tử cần đánh số tự động. Hy vọng bài viết này đã giúp bạn hiểu rõ hơn về cách sử dụng CSS Counters trong các dự án thực tế.