CSS Counters
พิซซ่า
แฮมเบอร์เกอร์
ฮอทดอก
ตัวนับ CSS คือ "ตัวแปร" ที่ดูแลโดย CSS ซึ่งค่าที่สามารถเพิ่มได้ตามกฎ CSS (เพื่อติดตามจำนวนครั้งที่ใช้) ตัวนับช่วยให้คุณปรับลักษณะที่ปรากฏของเนื้อหาตามตำแหน่งในเอกสาร
การนับเลขอัตโนมัติด้วยตัวนับ
ตัวนับ CSS เป็นเหมือน "ตัวแปร" ค่าตัวแปรสามารถเพิ่มได้ตามกฎ CSS (ซึ่งจะติดตามจำนวนครั้งที่ใช้)
ในการทำงานกับตัวนับ CSS เราจะใช้คุณสมบัติต่อไปนี้:
counter-reset
- สร้างหรือรีเซ็ตตัวนับcounter-increment
- เพิ่มค่าตัวนับcontent
- แทรกเนื้อหาที่สร้างขึ้นcounter()
หรือcounters()
ฟังก์ชัน - เพิ่มค่าของตัวนับให้กับองค์ประกอบ
หากต้องการใช้ตัวนับ CSS จะต้องสร้างด้วยcounter-reset
.
ตัวอย่างต่อไปนี้สร้างตัวนับสำหรับหน้า (ในตัวเลือกเนื้อหา) จากนั้นเพิ่มค่าตัวนับสำหรับองค์ประกอบ <h2> แต่ละรายการ และเพิ่ม "ส่วน < ค่าของตัวนับ >:" ที่จุดเริ่มต้นของแต่ละองค์ประกอบ <h2>:
ตัวอย่าง
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
เคาน์เตอร์ทำรัง
ตัวอย่างต่อไปนี้สร้างตัวนับหนึ่งตัวสำหรับหน้า (ส่วน) และตัวนับหนึ่งตัวสำหรับแต่ละองค์ประกอบ <h1> (ส่วนย่อย) ตัวนับ "ส่วน" จะถูกนับสำหรับแต่ละองค์ประกอบ <h1> ที่มี "ส่วน < ค่าของตัวนับส่วน >" และตัวนับ "ส่วนย่อย" จะถูกนับสำหรับแต่ละองค์ประกอบ <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) " ";
}
ตัวนับยังมีประโยชน์ในการสร้างรายการที่มีโครงร่าง เนื่องจากอินสแตนซ์ใหม่ของตัวนับจะถูกสร้างขึ้นโดยอัตโนมัติในองค์ประกอบย่อย ที่นี่เราใช้
counters()
ฟังก์ชันเพื่อแทรกสตริงระหว่างระดับต่างๆ ของตัวนับที่ซ้อนกัน:
ตัวอย่าง
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
คุณสมบัติตัวนับ CSS
Property | Description |
---|---|
content | Used with the ::before and ::after pseudo-elements, to insert generated content |
counter-increment | Increments one or more counter values |
counter-reset | Creates or resets one or more counters |
counter() | Returns the current value of the named counter |