شمارنده ها در CSS (قسمت دوم)

مقدمه

در قسمت اول شمارنده ها مفاهیم پایه با ساخت یک مثال ساده مورد بررسی قرار گرفت. در این مطلب می خواهیم روش پیاده سازی شمارنده های چندگانه و تودرتو را بررسی کنیم.

شمارنده های تودرتو

برای ساخت شمارنده های تودرتو کافی است به جای تابع ()counter از تابع ()counters استفاده کنیم. برای این تابع به غیر از نام شمارنده باید رشته ای برای جدا کردن شمارش تودرتو تعریف شود. تابع ()counters فقط برای شمارش عناصر تودرتو که واقعا در HTML تودرتو هستند کار می کند.

به عنوان مثال می خواهیم برای لیست تودرتوی زیر شمارنده بسازیم. به رشته جدا کننده توجه داشته باشید.

<ul>
  <li> آیتم
    <ul>
      <li>آیتم داخلی</li>
      <li>آیتم داخلی</li>
      <li>آیتم داخلی
        <ul>
          <li>آیتم داخلی داخلی</li>
          <li>آیتم داخلی داخلی</li>
          <li>آیتم داخلی داخلی</li>
          <li>آیتم داخلی داخلی</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

در CSS داریم:

ul {
  counter-reset: nested-counter;
}

ul li {
  counter-increment: nested-counter;
}

ul li:before {
  content: counters(nested-counter, ".") ") ";
}

خروجی مثال را بررسی کنید.

 

See the Pen Nested Counters by Mojtaba Seyedi (@seyedi) on CodePen.

 

شمارنده های چندگانه

فرض کنید مقاله ای داریم که تقسیم بندی آن با تگ های h2 مشخص شده است یعنی هر قسمت از مطلب با یک عنوان شروع می شود و هر قسمت شامل قسمت های داخلی است که با تگ h3 عنوان گرفته اند. این ساختار نوشتاری مقاله است که قسمت های مختلف تقسیم بندی نشده اند و در HTML ساختاری تودرتو وجود ندارد, در واقع تمام تگ های h2 و h3 در همسایگی هستند.

<article>
  <h1>عنوان اصلی</h1>
  <p>...</p>
  <h2>عنوان هر قسمت</h2>
  <p>...</p>
  <h2>عنوان هر قسمت</h2>
  <p>...</p>
  <h3>عنوان قسمت داخلی</h3>
  <p>...</p>
  <h3>عنوان قسمت داخلی</h3>
  <p>...</p>
  <p>...</p>
  <h2>عنوان هر قسمت</h2>
  <p>...</p>
  <h3>عنوان قسمت داخلی</h3>
  <p>...</p>
  <h3>عنوان قسمت داخلی</h3>
  <p>...</p>
  <h3>عنوان قسمت داخلی</h3>
  <p>...</p>
</article>

می دانیم که زمانی می توانیم از تابع ()counters برای شمارش تودرتو استفاده کنیم که ساختار در HTML به صورت تودرتو چیده شده باشد نه همسایگی.

در اینجا برای شمارش تودرتو در قدم اول یک شمارنده برای تگ های h2(قسمت اصلی) تعریف می کنیم. سپس یک شمارنده دیگر برای تگ های h3(قسمت های داخلی) تعریف می کنیم اما به جای آنکه شمارش این شمارنده را نسبت به تگ article انجام دهیم نسبت به تگ های h2 انجام می دهیم. با این کار هر بار که تگ h2 دیده شود, شمارنده h3 ریست می شود و به عدد صفر باز می گردد و دوباره شمارش برای تگ های h3(قسمت های داخلی) از سر گرفته می شود.

در CSS داریم:

article {
    counter-reset: my-counter;
}

h2 {
    counter-increment: my-counter;    
    counter-reset: sub-counter;
}

h2:before {
    content: counter(my-counter) ". ";
}

h3 {
    counter-increment: sub-counter;
}

h3:before {
    content: counter(sub-counter);
}

در حال حاضر نمایش شماره های قسمت های داخلی به صورت 1,2,3,.. می باشد, اگر بخواهیم نمایش آنها بیشتر مرتبط با قسمت های اصلی مقاله باشند یعنی برای قسمت های داخلی در قسمت اصلی اول شمارش به صورت 1.1,1.2,1.3,… و برای قسمت های داخلی در قسمت دوم شمارش به صورت 2.1,2.2,2.3,… نمایش داده شود کافی است نمایش شمارنده h3 را به صورت زیر انجام دهیم:

h3:before {
  counter(sub-counter) "." counter(my-counter) " ";
}

خروجی نهایی به صورت زیر خواهد بود.
 

See the Pen jPWPbG by Mojtaba Seyedi (@seyedi) on CodePen.