סגנונות של מונה ורשימה

הרבה סוגי תוכן מיוצגים בצורה הכי טובה כרשימה ב-HTML. בתוכן של רשימה ממוספרת, כמו שלבים במתכון או הערות שוליים במאמר, הסמן מכיל בדרך כלל גם מידע. יש כמה דרכים לשלוט במונים ברשימה ב-CSS.

סגנונות רשימה

יש מגוון רחב של סוגי סגנונות רשימה מוגדרים מראש שתומכים במספרים, באותיות, בספרות רומיות ובהרבה מערכות ספירה בינלאומיות.

בנוסף לסגנונות שנתמכים בדפדפנים, ארגון W3C פרסם סגנונות מוכנים של מונה, עם תמיכה ב-181 סגנונות נוספים ב-45 מערכות כתיבה.

אם האפשרויות האלה לא מתאימות לצרכים שלכם, אתם יכולים גם להגדיר @counter-style מותאם אישית. כך תוכלו לציין סמלים בהתאמה אישית, קידומת וסיומת ועוד.

כברירת מחדל, סמן הפריט הוא outside הרשימה, הוא ממוקם לפני הרשימה ומיושר לימין. אפשר גם למקם את סמן הפריט בתוך הרשימה, באמצעות list-style-position: inside.

מונים

סגנונות הרשימה קובעים איך סמני הפריטים ברשימה מוצגים, אבל בעזרת מונה אפשר לקבוע אילו ערכים יוצגו. עבור רכיבי פריט ברשימה <li>, הדפדפן יוצר מונה בשם list-item, שמוגדל ב-1 עבור כל פריט ברשימה.

המונים של CSS סופרים את מספר הפעמים שרכיב עם ערך counter-increment תואם מוצג.

כדי ליצור מונה חדש, משתמשים ב-counter-reset עם שם מונה, ואפשר גם עם ערך התחלתי. לרוב מגדירים את המאפיין הזה ברכיב אב שמכיל את כל הרכיבים שייכללו בספירה.

לאחר מכן, מוסיפים מאפיין counter-increment לכל רכיב שרוצים לספור.

לבסוף, מציגים את ערך המונה באמצעות הפונקציה counter().

בדוגמה הזו, אנחנו רוצים להציג את המספר הסידורי של הערות השוליים כטקסט הקישור לכל הערת שוליים. מכיוון שאנחנו רוצים מונה יחיד לכל המסמך, אנחנו מגדירים את counter-reset: note בגוף המסמך, ומגדילים את הערך בכל קישור להערת שוליים.

אפשר גם להשתמש בכמה מוני נתונים כדי לספור פריטים שונים. בדוגמה של הערות השוליים, מה קורה אם רוצים להציג את האינדקס של הקטע והפסקה שבהם מופיעה הערת השוליים?

אפשר ליצור את מספר הקטע בגוף המסמך באמצעות counter-reset, ואז להגדיל אותו בכל רכיב <h2>. אנחנו רוצים שמספר הפסקאות יתאפס בכל קטע, ולכן נשתמש ב-counter-reset ברכיבי <h2>, ונוסיף 1 ברכיבי <p>.

בסוף, אנחנו משלבים את ערכי המונה בנכס content.

a:after {
  content: "(S" counter(section) "P" counter(paragraph) "N" counter(note) ")";
  font-size: small;
  vertical-align: super;
}

מונים מקוננים

מה קורה כשמכניסים רשימה בתוך רשימה? המונה list-item מאותחל לכל רכיב <ul> או <ol>, והשימוש ב-counter() מחזיר רק את מספר הספירה הפנימית ביותר. אם רוצים להציג את הספירה מכל אחד מהמונים המקוננים, משתמשים בפונקציה counters(), שמקבלת שם של מונה ומפריד.

li::marker {
  content: counters(list-item, ".")
  }

היפוך של מונים

כברירת מחדל, מוניטורים (כולל מוניטור list-item מרומז לרכיבי <ol>) מתחילים ב-0 וסופרים כלפי מעלה ב-1 לכל רכיב, כלומר הרכיב הראשון ייספר כ-1. מה אם רוצים לספור אחורה עד 1?

כדי לעשות את זה, מוסיפים את המאפיין reversed אל <ol>. אם משתמשים בסגנון הרשימה הרגיל, הסמנים יפעלו כצפוי. עם זאת, אם אתם משתמשים בדלפק מותאם אישית, תצטרכו להגדיר את counter-increment לערך שלילי ולחשב את ערך ההתחלה של הדלפק באופן ידני.