צריך לסנן מראש קבוצה של רכיבי צאצא לפני שמחילים לוגיקת An+B עליה.
הבוררים עבור המעמד של :nth-child() ושל :nth-last-child()
באמצעות הסלקטור :nth-child() לסיווג פסאודו-מחלקה אפשר לבחור רכיבים ב-DOM לפי האינדקס שלהם. באמצעות An+B microstax אפשר לקבוע אילו רכיבים בוחרים.
:nth-child(2): בוחרים את הילד השני.:nth-child(2n): אפשר לבחור את כל הצאצאים הזוגיים (שני, רביעי, שישי, שמיני וכן הלאה).:nth-child(2n+1): בחירה של כל הצאצאים האי-זוגיים (ראשון, שלישי, חמישי, שביעי וכן הלאה).:nth-child(5n+1): בוחרים את הצאצא הראשון (=(5×0)+1), הסוג השישי (=(5×1)+1), או הצאצא ה-11 (=(5×2)+1), ....:nth-child(5n+2): בוחרים את הצאצא השני (=(5×0)+2), השביעי (=(5×1)+2), השני (=(5×2)+2), ... הצאצא.
עם זאת, יש יותר אפשרויות בחירה לגבי הקריאייטיב אם משמיטים את הפרמטר A. לדוגמה:
:nth-child(n+3): בוחרים את כל הילדים מהמרחב השלישי (3, רביעי, חמישי וכן הלאה).:nth-child(-n+5): בוחרים את כל הילדים עד החמישי (ראשון, שני, 3, 4, חמישי).
אפשר לשלב כמה מהבחירות האלה של :nth-child() כדי לבחור טווחי רכיבים:
:nth-child(n+3):nth-child(-n+5): בוחרים את כל הילדים מהשלישי עד החמישי (3, 4, חמישי).
באמצעות :nth-last-child() אפשר לבצע בחירות דומות, אבל במקום להתחיל את הספירה מההתחלה, אתה מתחיל את הספירה מהסוף.
בחירות סינון מראש עם התחביר of S
תכונה חדשה בסלקטורים ב-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 עושה את הפעולה שלו.
תמיכה בדפדפן
- 111
- 111
- 113
- 9
דוגמאות
לדוגמה, הפונקציה :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;
}
השיטה הזאת מתאימה לטבלאות סטטיות, אבל כשמתחילים לסנן באופן דינמי את תוכן הטבלה, זה נעשה בעייתי. לדוגמה, כאשר השורה השנייה מוסתרת, השורות הראשונה והשלוש גלויות, ולכל אחת מהן צבע רקע זהה.
כדי לתקן את הבעיה, אנחנו יכולים לנצל את :nth-child(An+B [of S]?) על ידי החרגת השורות המוסתרות מהלוגיקה של An+B:
tr:nth-child(even of :not([hidden])) {
background-color: lightgrey;
}
סבבה, לא?
תמונה מאת Markus Spiske ב-UnFlood