שליטה רבה יותר על בחירות :nth-child() עם תחביר S

מסננים מראש קבוצה של רכיבי צאצא לפני שמחילים עליהם את הלוגיקה של A+B.

Bramus

הבוררים של פסאודו-מחלקות :nth-child() ו-:nth-last-child()

באמצעות הבורר :nth-child() של פסאודו-מחלקות אפשר לבחור רכיבים ב-DOM לפי האינדקס שלהם. באמצעות An+B מיקרו-תחביר, אתם יכולים לשלוט במדויק באלמנטים שאתם רוצים לבחור.

• ‫:nth-child(2): בוחרים את הילד או הילדה השני/ה.
• ‫:nth-child(2n): בוחרים את כל הילדים הזוגיים (השני, הרביעי, השישי, השמיני וכן הלאה).
• ‫:nth-child(2n+1): בוחרים את כל הילדים האי-זוגיים (1,‏ 3,‏ 5,‏ 7 וכן הלאה).
• ‫:nth-child(5n+1): בוחרים את הצאצא הראשון (=(5×0)+1), השישי (=(5×1)+1), האחד-עשר (=(5×2)+1) וכן הלאה.
• ‫:nth-child(5n+2): בוחרים את הילד השני (=(5×0)+2), השביעי (=(5×1)+2), ה-12 (=(5×2)+2) וכן הלאה.

אבל אם לא תציינו את הפרמטר A, תוכלו לבחור עוד קריאייטיבים. לדוגמה:

• ‫:nth-child(n+3): בוחרים כל צאצא החל מהצאצא השלישי (השלישי, הרביעי, החמישי וכן הלאה).
• ‫:nth-child(-n+5): בחירה של כל צאצא עד הצאצא החמישי (הראשון, השני, השלישי, הרביעי והחמישי).

אפשר לשלב כמה מהאפשרויות האלה :nth-child() כדי לבחור טווחים של רכיבים:

• ‫:nth-child(n+3):nth-child(-n+5): בחירה של כל צאצא החל מהצאצא השלישי ועד הצאצא החמישי (3rd, 4th, 5th).

באמצעות :nth-last-child() אפשר לבצע בחירות דומות, אבל במקום להתחיל לספור מההתחלה, מתחילים לספור מהסוף.

בחירת סינון מראש באמצעות התחביר of S

ב-CSS Selectors Level 4 (סלקטורים ב-CSS רמה 4) יש אפשרות להעביר רשימת סלקטורים ל-:nth-child() ול-:nth-last-child().

:nth-child(An+B [of S]?)
:nth-last-child(An+B [of S]?)

אם מציינים את of S, הלוגיקה של An+B חלה רק על רכיבים שתואמים לרשימת הבוררים שצוינה S. המשמעות היא שאתם יכולים לסנן מראש את הילדים לפני ש-An+B מבצע את הפעולה שלו.

דוגמאות

לדוגמה, :nth-child(2 of .highlight) בוחר את הרכיב התואם השני שיש לו את המחלקה .highlight. במילים אחרות: מתוך כל הילדים עם הכיתה .highlight, בוחרים את הילד השני.

לעומת זאת, .highlight:nth-child(2) בוחר את הרכיב שיש לו המחלקה .highlight וגם הוא רכיב הצאצא השני.

בהדגמה שלמטה אפשר לראות את ההבדל הזה:

• הרכיב שתואם ל-:nth-child(2 of .highlight) מוקף בקו מתאר ורוד.
• הרכיב שתואם ל-.highlight:nth-child(2) מודגש בקו מתאר ירוק.

שימו לב ש-S היא רשימת סלקטורים, כלומר היא מקבלת כמה סלקטורים שמופרדים בפסיק. לדוגמה, :nth-child(4 of .highlight, .sale) בוחר את הרכיב הרביעי שהוא .highlight או .sale מתוך קבוצה של רכיבים באותה רמה.

בהדגמה שלמטה, האלמנט שתואם ל-:nth-child(4 of .highlight, .sale) מודגש בקו מתאר כתום.

הצגת נתונים בפסים, גרסה מחודשת

דוגמה קלאסית לשימוש ב-:nth-child() היא כשיוצרים טבלה עם פסים לסירוגין. זו טכניקה ויזואלית שבה הצבעים של השורות בטבלה מתחלפים. בדרך כלל, הגישה תהיה כזו:

tr:nth-child(even) {
  background-color: lightgrey;
}

השיטה הזו עובדת מצוין בטבלאות סטטיות, אבל היא בעייתית כשמתחילים לסנן את תוכן הטבלה באופן דינמי. לדוגמה, אם שורה 2 מוסתרת, שורות 1 ו-3 יהיו גלויות, וכל אחת מהן תהיה עם אותו צבע רקע.

כדי לפתור את הבעיה, אפשר להשתמש ב-:nth-child(An+B [of S]?) ולהחריג את השורות המוסתרות מהלוגיקה של An+B:

tr:nth-child(even of :not([hidden])) {
  background-color: lightgrey;
}

מגניב, נכון?

תמונה מאת Markus Spiske ב-Unsplash