جلسه ۶۴ – شمارنده ها در CSS

شمارنده در CSS چیست؟ منظور از Counter در CSS چیست؟ چگونه در CSS شماره گذاری کنیم؟

شمارنده ها به ما کمک می‌کنن که با دست باز تری عناصر خودمون رو شماره گذاری کنیم و به اون ها یک ترتیب مناسب بدیم.

انواع counter ها در CSS

شماره گذاری عناصر به دو فرم زیر انجام می‌شه:

• شماره گذاری مستقل
• شماره گذاری وابسته یا nested counter

هر کدوم از این شماره گذاری ها رو تو این جلسه به شکل مفصل بررسی می‌کنیم.

اما قبل از بررسی هر کدوم از اون ها، نیاز داریم که خاصیت ها و مفاهیم ابتدایی مربوط به شمارنده ها رو بدونیم.

خاصیت شمارنده ها در CSS

شمارنده ها، خاصیت های متعددی دارن که به صورت مختصر تو این بخش توضیحشون می‌دیم.

خاصیت counter-reset

برای ساختن یک شمارنده، قبل از هر کاری، باید اون رو بسازیم و بهش یک اسم اختصاص بدیم.

به سینتکس خاصیت مورد نظر توجه کنین:

به بخش های مختلف سینتکس بالا توجه کنین.

• ما تو نقطه شروع، عددی رو قرار می‌دیم که میخوایم شمارنده، شمارش رو از اون شروع کنه.
• تو بخش نام دلخواه شمارنده هم، یک اسم کاملا دلخواه قرار میدیم.
• این خاصیت، باید به عنصر پدر عناصری که قراره شمارش بشن، اختصاص داده بشه.

به کد CSS زیر توجه کنین:

/* --- شمارنده از عدد ۳ شروع می‌کنه --- */
div{
   counter-reset: myCounter 3;
}

/* --- هروقت عدد ننویسیم، شمارنده به صورت خودکار از عدد صفر شروع می‌کنه --- */
div{
   counter-reset: shomarande;
}

/* --- شمارنده از عدد ۱۰- شروع می‌کنه --- */
div{
   counter-reset: c -10;
}

حالا چطور می‌تونیم به شمارنده بفهمونیم که چند تا چند تا بالا بره؟

خاصیت counter-increment

توسط این خاصیت، می‌تونیم به شمارنده خودمون، بفهمونیم که باید چند تا چند تا بالا بره یا “پایین” بیاد؟

به سینتکس و نحوه نوشتارش دقت کنین:

به بخش های مختلف سینتکس بالا دقت کنین:

• تو بخش نام دلخواه شمارنده، همون نامی رو قرار می‌دیم که تو خاصیت counter-reset برای شمارنده خودمون تعریف کردیم.
• تو بخش مقدار پیشروی، عددی رو قرار می‌دیم که تو هر مرحله پیشروی، با نقطه شروع شمارنده ما جمع می‌شه.
• این خاصیت رو، برای عناصری تعریف می‌کنیم که می‌خوایم شمارش بشن.

به مثال های زیر دقت کنین:

/* --- شمارنده ۱۰ تا ۱۰ تا بالا می‌ره --- */
img{
   counter-increment: myCounter 10;
}

/* --- اگه مقدار پیشروی اختصاص داده نشه، شمارنده یکی یکی بالا می‌ره. --- */
img{
   counter-increment: shomarande;
}

/* --- شمارنده ۵ تا ۵ تا پایین میاد --- */
img{
   counter-increment: c -5;
}

حالا به بررسی هر کدوم از دو نوع شمارنده می‌پردازیم.

شمارنده های مستقل

شمارنده های مستقل، شمارنده هایی هستن که فقط روی یک رشته از عناصر تاثیر می‌زارن و از تابع ()counter استفاده می‌کنن.

برای درک نحوه استفاده از شمارنده مستقل، مستقیم به مثال رجوع می‌کنیم.

به کد HTML و CSS زیر توجه کنین:

<div>
   <h1>
      Section A
    </h1>
   <h1>
      Section B
   </h1>
   <h1>
      Section C
   </h1>
</div>

div{
   counter-reset: myCounter;
}
h1{
   counter-increment: myCounter 1;
}
h1::before{
   content: counter(myCounter) ".";
}

حالا کد بالا رو با هم قسمت به قسمت در این آموزش طراحی وب سایت ، تحلیل کنیم:

• کد HTML ما از یک عنصر div تشکیل شده که داخل اون، تعدادی عنصر h1 رو قرار دادیم. به عبارت بهتر، عنصر div پدر محسوب می‌شه و عناصر h1 فرزندان اون هستن.
• همونطور که تو توضیح خاصیت counter-reset یاد گرفتیم، باید یک نام دلخواه برای شمارندمون انتخاب کنیم. اینجا نام myCounter رو انتخاب کردیم و نقطه شروع، به صورت خودکار عدد صفر تنظیم شده.
• خاصیت counter-increment رو برای عناصری به کار بردیم که می‌خوایم به ترتیب چیده بشن. نام دلخواه رو ذکر کردیم و مقدار پیشروی رو عدد یک در نظر گرفتیم.
• حالا برای قرار دادن شمارنده ها قبل از هر عنصر h1 از شبه عنصر before استفاده می‌کنیم. سپس با استفاده از خاصیت content، مقداری که باید قرار داده بشه رو با تابع ()counter مشخص می‌کنیم. حواستون باشه که حتما نام شمارنده رو به عنوان ورودی تابع قرار بدید.
• مقدار “.” نوشته شده بین شمارنده و محتوا قرار می‌گیره.

اگه جایی از توضیحات مقاله براتون مبهم بود، حتما تو قسمت نظرات بگین تا کمکتون کنیم.

کد های فوق، نتیجه زیر رو به ما می‌دن:

شمارنده های وابسته (nested counters)

شمارنده های وابسته، بر خلاف شمارنده های مستقل، فقط روی یک رشته از عناصر تاثیر نمی‌زارن و می‌تونن چندین رشته‌ی وابسته به هم رو شمارش کنن.

به کد های HTML و CSS زیر توجه کنین:

<ul>
   <li>
      Section A
      <ul>
         <li>Section A.A</li>
         <li>Section A.B</li>
      </ul>
   </li>
   <li>
      Section B
      <ul>
         <li>Section B.A</li>
         <li>Section B.B</li>
         <li>Section B.C</li>
      </ul>
   </li>
   <li>
      Section C
      <ul>
         <li>Section C.A</li>
      </ul>
   </li>
</ul>

ul{
   counter-reset: myCounter;
   list-style: none;
}
li{
   counter-increment: myCounter 1;
   font-size: 1.3em;
}
li::before{
   content:counters(myCounter, ".")".";
}

کد بالا رو، قسمت به قسمت با هم تحلیل کنیم:

• تو کد های HTML، چند تگ ul رو همراه با فرزندان li اون ها می‌بینیم. با این تفاوت که هر کدوم از تگ های li، فرزندان دیگه ای هم دارن.
• داخل دو قطعه کد اول CSS، برای شمارندمون اسم، نقطه شروع و مقدار پیشروی تعیین کردیم.
• داخل قطعه سوم کد CSS، مجددا از شبه عنصر before و خاصیت content برای قرار دادن محتوای شمارنده قبل از هر تگ li استفاده کردیم.
• تفاوت قطعه کد سوم این مثال با قطعه کد سوم مثال قبل، تو استفاده ما از تابع()counters به جای ()counter هست.
• برای ورودی اول، کافیه نام شمارنده رو وارد کنین. اما برای ورودی دوم تابع، باید مقداری رو وارد کنید که بین شمارنده های عناصر وابسته شما قرار می‌گیره.

نتیجه کد به صورت زیر مشاهده می‌شه:

پایان ترم: یه سوال استک اور فلویی!

استک اور فلو، یک وب سایت پرسش و پاسخ در مورد مشکلات برنامه نویسیه. سوال زیر، یکی از سوالات ذکر شده در این وب سایته.

با توجه به مطالب آموخته شده در این مقاله، انتظار می‌ره که بتونین به برنامه نویس زیر یاری برسونین.

سوال:

این کد های HTML و CSS منه:

<ul class="moving-steps">
<li></li>
<li></li>
<li></li>
</ul>

.moving-steps > li:before {
   background: none repeat scroll 0 0 #8F8888;
   border-radius: 15px;
   color: #FFFFFF;
   counter-increment: headings 1;
   content: counter(headings);
   display: block;
   float: left;
   font-size: 16px;
   font-weight: bold;
   height: 25px;
   line-height: 26px;
   margin-bottom: 0;
   margin-right: 5px;
   text-indent: 8px;
   width: 25px;
}

ولی این تیکه از کدم کار نمی‌کنه:

counter-increment: headings 1;
content: counter(headings);

به نظرتون چیزی رو جا انداختم؟

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

تو این مقاله از آموزش CSS ، مفهوم شمارنده ها در CSS رو با هم بررسی کردیم.

شمارنده ها به دو نوع “مستقل” و “وابسته” تقسیم بندی می‌شدن.

در نوع مستقل، از تابع ()counter و در نوع وابسته، از تابع ()counters استفاده می‌کردیم.

تفاوت بین این دو نوع، تواناییشون در مرتب کردن عناصر تو در تو، و عناصر مستقل بود.

این فصل کوتاه به پایان رسید، امیدوارم که براتون مفید بوده باشه 🙂

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.

مدیر محتوا: علی اسمعیلی‌