CSS Academy · पाठ

::before के साथ CSS काउंटर

CSS counter और counter() function से स्वचालित numbering system बनाना सीखिए।

पाठ 3, कुल 4 में से13 चरण

::before के साथ CSS काउंटर, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

CSS गणक क्या होते हैं

CSS गणक ऐसे चर होते हैं जिनका प्रबंधन CSS करता है। इनके मान बढ़ाए जा सकते हैं और जनित सामग्री में प्रदर्शित किए जा सकते हैं। इनकी मदद से JavaScript या HTML में संख्याओं का मैन्युअल प्रबंधन किए बिना स्वचालित क्रमांकन किया जा सकता है।

counter-reset

counter-reset किसी गणक को आरंभ या रीसेट करता है। इसे उन आइटमों को रखने वाले तत्व पर लगाएँ जिनकी गिनती करनी है।

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

counter-increment

counter-increment हर बार लागू होने पर गणक को 1 से बढ़ाता है (डिफ़ॉल्ट मान)। इसे दोहराए जाने वाले आइटमों पर लगाएँ।

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

content में counter() फ़ंक्शन

छद्म-तत्व के content गुणधर्म में counter(name) का उपयोग करके गणक का वर्तमान मान प्रदर्शित करें।

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

शैलीबद्ध चरण गणक

JavaScript के बिना पूर्ण क्रमांकित चरण घटक:

<div class="steps">
  <div class="step">Create an account</div>
  <div class="step">Verify your email</div>
  <div class="step">Start your first project</div>
</div>

गणक का प्रारंभिक मान

counter-reset में कस्टम प्रारंभिक संख्या सेट करें:

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
</ul>

गणक की शैलियाँ

सूची की शैली का प्रकार निर्दिष्ट करने के लिए counter() में दूसरे तर्क का उपयोग करें:

<ul class="list" style="list-style:none;padding-left:0;">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

counters() से नेस्टेड गणक

counters(name, separator) (अंत में "s" के साथ) "1.1", "1.2", "2.1" जैसी नेस्टेड क्रमांकन बनाता है:

<ol>
  <li>Chapter one
    <ol>
      <li>Intro</li>
      <li>Details</li>
    </ol>
  </li>
  <li>Chapter two
    <ol>
      <li>Overview</li>
    </ol>
  </li>
</ol>

नेस्टेड सूचियों पर रीसेट करना

हर नेस्टेड ol अपने गणक का कार्य-क्षेत्र विरासत में प्राप्त करता है। counters() फ़ंक्शन स्वचालित रूप से गणक की पूरी श्रृंखला का उपयोग करता है।

अनुभाग क्रमांकन

लंबे दस्तावेज़ों में शीर्षकों का स्वचालित क्रमांकन करें:

<h2>Getting Started</h2>
<h3>Installation</h3>
<h3>Configuration</h3>
<h2>Advanced Usage</h2>
<h3>Plugins</h3>

गणकों से विषय-सूची

पहले CSS गणकों का उपयोग विषय-सूचियों और फ़ॉर्मैट किए गए दस्तावेज़ों के लिए किया जाता था। आजकल यह काम अक्सर JavaScript फ़्रेमवर्क द्वारा किया जाता है, लेकिन CSS गणक अब भी केवल CSS वाला विकल्प हैं।

त्वरित जाँच

हर मेल खाने वाले तत्व पर CSS गणक को कौन-सा गुणधर्म बढ़ाता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावृत्ति

CSS गणक JavaScript के बिना स्वचालित क्रमांकन सक्षम करते हैं। कंटेनर पर counter-reset, दोहराए जाने वाले आइटमों पर counter-increment का उपयोग करें और छद्म-तत्व के content में counter(name) से मान प्रदर्शित करें। counters() विभाजकों के साथ नेस्टेड क्रमांकन संभालता है।

शुरुआत निःशुल्क

एआई शिक्षक के साथ CSS सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “::before के साथ CSS काउंटर” पाठ निःशुल्क है?

हाँ—“::before के साथ CSS काउंटर” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“::before के साथ CSS काउंटर” में मैं क्या सीखूँगा?

CSS counter और counter() function से स्वचालित numbering system बनाना सीखिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“::before के साथ CSS काउंटर” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← CSS Academy पर वापस जाएँ