תכונת CSS זו שימושית במיוחד לעיצוב טבלאות ורשימות מורכבות.

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

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

תחביר הבורר :nth-child()

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

:nth-child(args) {
/*...*/
}

ההתמקדות העיקרית היא בטיעונים שבסוגריים. ארגומנטים אלה מגדירים את תת-קבוצת האלמנטים לבחירה.

שימוש בערכי מילות מפתח עבור מקרים נפוצים

בורר זה יכול להכיל שני ערכי מילות מפתח: מוזר ו אֲפִילוּ. הם שימושיים במיוחד עבור עיצוב שורות חלופיות בטבלה.

רשימה מסודרת פשוטה היא דוגמה טובה נוספת למקרים שבהם אתה יכול להשתמש בערכי מילות מפתח אלה:

<ol>
<li>Item 1li>
<li>Item 2li>
<li>Item 3li>
<li>Item 4li>
<li>Item 5li>
<li>Item 6li>
<li>Item 7li>
ol>
instagram viewer

משתמש ב :ילד n' (מוזר) בורר, אתה יכול לשנות את הצבע של כל פריט חלופי:

:nth-child(odd) {
color: red;
}

פריטים מתחילים באינדקס 1, כך שהפריט הראשון יופיע באדום, לאחר מכן השלישי, וכן הלאה:

סימון פונקציונלי ליותר גמישות

אתה יכול להשתמש במספר שלם בודד כדי לבחור אלמנט בודד, כך:

li:nth-child(4) {
color: red;
}

במקרה זה, הבורר תואם רק לפריט הרביעי ברשימה:

תחביר זה הוא מקרה מיוחד של התחביר הפונקציונלי הכללי יותר שבוחר פריטים התואמים דפוס נתון. תחביר זה הוא:

:nth-child(An+B) {
/*...*/
}

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

לדוגמה, קח את הארגומנט 3n+1:

li:nth-child(3n+1) {
color: red;
}

פעולה זו תתחיל את הבחירה בפריט הראשון ותמשיך עם כל פריט שלישי לאחר מכן:

השווה זאת עם הביטוי 3n+2:

li:nth-child(3n+2) {
color:red;
}

זה עדיין בוחר כל פריט שלישי, אבל עכשיו זה מתחיל מהפריט השני ברשימה:

דוגמה מעניינת נוספת היא :nth-child (n+3):

li:nth-child(n+3) {
color: red;
}

זה יבחר כל פריט (n), החל מהשלישי (+3). זה ייראה כך:

אתה יכול גם להשתמש בחיסור כדי להשיג תוצאות מסוימות:

li:nth-child(3n-1) {
color: red;
}

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

ה של תחביר

אתה יכול גם להשתמש במילת המפתח שֶׁל ואחריו א בוחר כארגומנט בבורר :nth-child(). תחביר זה מאפשר לך לצמצם את הפריטים האפשריים שהתבנית הרגילה בוחרת מהם.

לדוגמה, תאר לעצמך שהסימון שלך מסובך יותר מהמקור:

<ol>
<liclass="old">Item 1li>
<liclass="new">Item 2li>
<liclass="new">Item 3li>
<liclass="old">Item 4li>
<liclass="new">Item 5li>
<liclass="new">Item 6li>
<liclass="new">Item 7li>
ol>

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

.new {
font-weight: bold;
}
li:nth-child(evenof.new) {
color: red;
}

שימו לב כיצד רק הפריטים המודגשים המספרים הזוגיים הם אדומים:

שקול גם איך זה שונה מ li.new: nth-child (אפילו) אשר מכוון לרכיבי .new, אבל רק אם הם זוגיים. זה יהיה פריטים 2 ו-6 בדוגמה שלמעלה.

עבודה עם הבורר :nth-child()

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