CSS counter() फ़ंक्शन

विन्यास और उपयोग

counter() फ़ंक्शन विन्यास के रूप में वापस करता है।

उदाहरण

उदाहरण 1

पृष्ठ के लिए काउंटर बनाएं (body चयनकर्ता में)। प्रत्येक <h2> एलीमेंट को काउंटर मूल्य जोड़ें और प्रत्येक <h2> एलीमेंट के पहले "खंड क्रमांक" का टेक्स्ट जोड़ें:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "खंड " counter(section) ": ";
}

खुद इसे प्रयोग करें

उदाहरण 2

काउंटर की शैली सेट करें:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "खंड " counter(section, upper-roman) ": ";
}

खुद इसे प्रयोग करें

CSS व्याकरण

counter(countername, counterstyle)
मूल्य वर्णन
countername

अनिवार्य। काउंटर का नाम (counter-reset और counter-increment अभियान में उपयोग किए गए नाम से मेल खाता है)।

ध्यान दें कि नाम के लिए पूर्व-छोटी और बड़ी अक्षरों का अलग-अलग उपयोग किया जाता है।
counterstyle

विकल्पी। काउंटरर सामग्री (यह list-style-type की गुण, @counter-style का नाम या symbols() फ़ंक्शन हो सकता है)।

डिफ़ॉल्ट मूल्य दशमलवी है।

तकनीकी विवरण

संस्करण: CSS3

ब्राउज़र समर्थन

क्रोम एज फायरफॉक्स सफारी ओपेरा
समर्थन समर्थन समर्थन समर्थन समर्थन

संबंधित पन्ना

त्यूटोरियल:CSS काउंटर

संदर्भ:CSS content गुण

संदर्भ:CSS counter-increment गुण

संदर्भ:CSS counter-reset गुण

संदर्भ:CSS @counter-style नियम

संदर्भ:CSS counters() फ़ंक्शन