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

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

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

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

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

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

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

מונים

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

בדיקת ההבנה