CSS काउंटर-सेट एट्रिब्यूट

वर्णन और उपयोग

counter-set गुणांक को बनाने और CSS गणनाक को विशेष मान में सेट करने के लिए उपयोग किया जाता है。

counter-set गुणांक counter-increment गुणांक और content गुणांक के साथ आमतौर पर उपयोग किए जाते हैं。

उदाहरण

उदाहरण 1

एक गणनाक ("my-counter") बनाएं, इसे 5 में सेट करें और हर बार <h2> चयनकर्ता के उपस्थित होने पर इसे 1 बढ़ाएं:

body {
  /* "my-counter" को 5 में सेट करें */
  counter-set: my-counter 5;
}
h2::before {
  /* "my-counter" को 1 बढ़ाएं */
  counter-increment: my-counter;
  content: "Section " counter(my-counter) ". ";
}

अपने आप प्रयोग करें

उदाहरण 2

एक गणनाक ("my-counter") बनाएं, इसे 5 में सेट करें और हर बार <h2> चयनकर्ता के उपस्थित होने पर इसे 1 कम करें:

body {
  /* "my-counter" को 5 में सेट करें */
  counter-set: my-counter 5;
}
h2::before {
  /* "my-counter" को 1 कम करें */
  counter-increment: my-counter -1;
  content: "Section " counter(my-counter) ". ";
}

अपने आप प्रयोग करें

उदाहरण 3

अध्याय और उपअध्याय क्रमांक के लिए "Section 10:", "10.1", "10.2" जैसे फार्मेट का उपयोग करें:

body {
  /* "section" को 9 में सेट करें */
  counter-set: section 9;
}
h1 {
  /* "subsection" को 0 सेट करें */
  counter-set: subsection 0;
}
h1::before {
  /* "section" को 1 बढ़ाएं */
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
h2::before {
  /* "subsection" को 1 बढ़ाएं */
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

अपने आप प्रयोग करें

उदाहरण 4

एक गणनाकारक बनाएं जिसे 9 सेट किया जाए और हर बार <h2> चुनावकीया क़िस्म के आने पर इसे 1 बढ़ाया जाए (रोमन संख्या के रूप में):

body {
  /* "my-counter" को 9 सेट करें */
  counter-set: my-counter 9;
}
h2::before {
  /* "my-counter" को 1 बढ़ाएं */
  counter-increment: my-counter;
  content: counter(my-counter, upper-roman) ". ";
}

अपने आप प्रयोग करें

CSS व्याकरण

counter-set: none|counter-name number|initial|inherit;

गुण मान

मान वर्णन
none मूलभूत मान। गणनाकारक को सेट न करें।
counter-name number

सेट करने वाले गणनाकारक का नाम और उसका मान।

चुनावकीया क़िस्म आने के हर प्रावधान में गणनाकारक को इस मान पर सेट किया जाएगा।

मूलभूत मान 0 है।
initial इस गुण को उसके मूलभूत मान पर सेट करें। देखें initial।
inherit इस गुण को उसके पिता तत्व से विरासत करें। देखें inherit।
मूलभूत मान: none
विरासतशीलता: नहीं
एनिमेशन निर्माण: न समर्थित। देखें:एनिमेशन संबंधी गुण।
संस्करण: CSS2
जेसक्रिप्ट व्याकरण: object.style.counterSet="4"

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

तालिका में दिए गए संख्याएं इस गुण के पूर्ण समर्थन वाले पहले ब्राउज़र संस्करण को निर्देशित करती हैं।

च्रोम एज फायरफॉक्स सफारी ओपेरा
85 85 68 17.2 71

संबंधित पृष्ठ

संदर्भ:::before प्रतीक तत्व

संदर्भ:::after प्रतीक तत्व

संदर्भ:CSS कंटेंट एट्रिब्यूट

संदर्भ:CSS काउंटर-इनक्रीमेंट एट्रिब्यूट

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