Tidadigi Logo

CSS Counters

CSS counters cho phép bạn tự động đánh số các phần tử như danh sách hoặc sections. Chúng là "variables" được CSS duy trì. Giá trị của chúng có thể tăng lên bằng CSS rules. Nó theo dõi số lần chúng được sử dụng.

Để làm việc với CSS counters, chúng ta sử dụng một số properties:

  • counter-reset: Tạo mới hoặc reset một counter.
  • counter-increment: Tăng giá trị của counter.
  • content: Chèn nội dung được tạo (như giá trị counter) trước hoặc sau một phần tử.
  • counter() and counters() functions: Trả về giá trị hiện tại của một counter hoặc counter lồng nhau.

Automatic Numbering With Counters

CSS counters hoạt động như các "variables". Các variables này có thể tăng lên thông qua CSS. Giá trị của chúng có thể được sử dụng trong nội dung của một phần tử. Đây là một ví dụ cơ bản minh họa việc đánh số tự động cho các sections.

. Numbering Sections

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        body {
            counter-reset: section;
        }
        h2::before {
            counter-increment: section;
            content: "Section " counter(section) ": ";
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <h2>Pizza</h2>
    <h2>Hamburger</h2>
    <h2>Hotdogs</h2>
</body>
</html>
<!--Driver Code Ends-->
  • counter-reset: section;: Reset counter section ở đầu của phần tử body.
  • counter-increment: section;: Tăng giá trị counter cho mỗi phần tử <h2>.
  • content: "Section " counter(section) ": ";: Hiển thị giá trị của counter trước mỗi <h2>. Kết quả là một danh sách sections được đánh số.

. Nesting Counters

Bạn cũng có thể tạo nhiều counters. Mỗi counter hoạt động một cách độc lập. Ví dụ: bạn có thể có một counter cho sections. Một counter khác cho subsections. Đây là cách bạn có thể lồng các counters.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

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

<!--Driver Code Starts-->
</head>
<body>
    <h1>Pizza</h1>
    <h2>Cheese</h2>
    <h2>Tomato</h2>
    <h1>Hamburger</h1>
    <h2>Beef</h2>
    <h2>Chicken</h2>
    <h1>Hotdogs</h1>
    <h2>Classic</h2>
    <h2>Spicy</h2>
</body>
</html>
<!--Driver Code Ends-->
  • counter-reset: subsection;:: Reset counter subsection khi gặp một phần tử <h1> mới.
  • counter-increment: section;:: Tăng counter section cho mỗi <h1>.
  • counter-increment: subsection;:: Tăng counter subsection cho mỗi <h2>.
  • content: counter(section) "." counter(subsection): Kết hợp cả hai counters để hiển thị "Section 1.1", "Section 1.2", v.v.

Creating Outlined Lists with Counters

Counters cũng có thể hữu ích để tạo outlines. Chúng tự động tạo các instances mới của counters trong các phần tử con. Bạn có thể sử dụng function counters() để kết hợp các cấp counters khác nhau. Tạo numbering theo thứ bậc.

HTML 
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        ol {
            counter-reset: section;
            list-style-type: none;
        }
        li::before {
            counter-increment: section;
            content: counters(section, ".") " ";
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <ol>
        <li>Pizza</li>
        <li>Hamburger
            <ol>
                <li>Beef</li>
                <li>Chicken</li>
            </ol>
        </li>
        <li>Hotdogs</li>
    </ol>
</body>
</html>
<!--Driver Code Ends-->
  • counter-reset: section;: Reset counter ở đầu phần tử <ol>.
  • counter-increment: section;: Tăng counter cho mỗi <li>.
  • content: counters(section, "."): Sử dụng function counters() để hiển thị giá trị counter. Chúng được phân tách bằng dấu chấm (.). Tạo numbering theo thứ bậc.

Last Updated : 21/07/2025