ตัวนับ CSS คือ "ตัวแปร" ที่ดูแลโดย CSS ซึ่งค่าที่สามารถเพิ่มได้ตามกฎ CSS (เพื่อติดตามจำนวนครั้งที่ใช้) ตัวนับช่วยให้คุณปรับลักษณะของเนื้อหาตามตำแหน่งในเอกสารได้
ตัวนับ CSS เปรียบเสมือน "ตัวแปร" ค่าตัวแปรสามารถเพิ่มได้ตามกฎ CSS (ซึ่งจะติดตามจำนวนครั้งที่ใช้)
ในการทำงานกับตัวนับ CSS เราจะใช้คุณสมบัติดังต่อไปนี้:
counter-reset- สร้างหรือรีเซ็ตตัวนับ
counter-increment- เพิ่มค่าตัวนับ
content- แทรกเนื้อหาที่สร้างขึ้น
counter() or counters() function- เพิ่มค่าของตัวนับให้กับองค์ประกอบ
หากต้องการใช้ตัวนับ CSS จะต้องสร้างด้วย counter-reset ก่อน
ตัวอย่างต่อไปนี้จะสร้างตัวนับสำหรับเพจ (ในตัวเลือกเนื้อหา) จากนั้นเพิ่มค่าตัวนับสำหรับแต่ละองค์ประกอบ <h2> และเพิ่ม "ส่วน ค่าของตัวนับ:" ไปที่จุดเริ่มต้นของแต่ละ <h2> องค์ประกอบ:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>Using CSS Counters</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>Python Tutorial</h2>
<h2>SQL Tutorial</h2>
</body>
</html>
ตัวอย่างต่อไปนี้สร้างตัวนับหนึ่งตัวสำหรับเพจ (ส่วน) และตัวนับหนึ่งตัวสำหรับแต่ละองค์ประกอบ <h1> (ส่วนย่อย) ตัวนับ "section" จะถูกนับสำหรับแต่ละ <h1> องค์ประกอบที่มี "Section ค่าของตัวนับส่วน" และตัวนับ "subsection" จะถูกนับสำหรับแต่ละ <h2> องค์ประกอบที่มี "<ค่าของตัวนับส่วน.ค่าของตัวนับส่วนย่อย":
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) " ";
} ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<h1>HTML/CSS Tutorials</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>Bootstrap</h2>
<h2>W3.CSS</h2>
<h1>Scripting Tutorials</h1>
<h2>JavaScript</h2>
<h2>jQuery</h2>
<h2>React</h2>
<h1>Programming Tutorials</h1>
<h2>Python</h2>
<h2>Java</h2>
<h2>C++</h2>
</body>
</html>
ตัวนับยังมีประโยชน์ในการสร้างรายการโครงร่างเนื่องจากรายการใหม่ อินสแตนซ์ของตัวนับจะถูกสร้างขึ้นโดยอัตโนมัติในองค์ประกอบลูก ในที่นี้เราใช้ ฟังก์ชัน counters() เพื่อแทรกสตริงระหว่างระดับต่างๆ ที่ซ้อนกัน เคาน์เตอร์:
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
} ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
<ol>
<li>item</li>
<li>item</li>
</ol>
</body>
</html>
ใช้กับองค์ประกอบหลอก ::before และ ::after เพื่อแทรกเนื้อหาที่สร้างขึ้น
เพิ่มค่าตัวนับตั้งแต่หนึ่งค่าขึ้นไป
สร้างหรือรีเซ็ตตัวนับตั้งแต่หนึ่งตัวขึ้นไป
ส่งกลับค่าปัจจุบันของตัวนับที่ระบุชื่อ