שימוש: nth של סוג (n) עם טבלאות
כדי להפוך את הטבלאות לקלות יותר לקריאה, זה בדרך כלל מועיל לשורות סגנון עם צבעי רקע לסירוגין. אחת הדרכים הנפוצות ביותר לטבלאות היא להגדיר את צבע הרקע של כל שורה אחרת. זה נקרא לעתים קרובות "זברה פסים."
אתה יכול להשיג זאת על ידי הגדרת כל שורה אחרת עם CSS בכיתה ולאחר מכן הגדרת את הסגנון של מחלקה זו. זה עובד אבל היא לא הדרך הטובה ביותר או היעילה ביותר ללכת על זה.
בעת שימוש בשיטה זו, בכל פעם שאתה צריך לערוך את הטבלה ייתכן שיהיה עליך לערוך כל שורה אחת בטבלה כדי להבטיח כל שורה עולה בקנה אחד עם השינויים. לדוגמה, אם אתה מוסיף שורה חדשה לטבלה, כל שורה אחרת שמתחת היא צריכה לשנות את הכיתה.
CSS מקל על שולחנות בסגנון עם פסים זברה. אתה לא צריך להוסיף כל תכונות HTML נוספות או כיתות CSS, אתה פשוט להשתמש בבורר : nth-of-type (n) CSS .
הסמן: nth-of-type (n) הוא מעמד מדומה-מבני ב- CSS שמאפשר לך לסגנון אלמנטים המבוססים על מערכות היחסים שלהם להורים ולאחים. אתה יכול להשתמש בו כדי לבחור אלמנט אחד או יותר על פי סדר המקור שלהם. במילים אחרות, הוא יכול להתאים לכל אלמנט שהוא הילד ה NTH מסוג מסוים של ההורה שלו.
האות n יכולה להיות מילת מפתח (כגון מוזר או אפילו), מספר או נוסחה.
לדוגמה, כדי לסמן כל תג פסקה אחר עם צבע רקע צהוב, מסמך ה- CSS שלך יכלול:
p: nth of of type (מוזר) {
רקע: צהוב;
}
התחל עם HTML שלך טבלה
ראשית, ליצור את הטבלה כפי שאתה נוהג לכתוב את זה ב- HTML. אל תוסיף כל מחלקה מיוחדת לשורות או לעמודים.
בגיליון הסגנונות שלך, הוסף את CSS הבא:
tr: nth של סוג (מוזר) {
צבע רקע: #ccc;
}
זה יהיה סגנון כל שורה אחרת עם צבע רקע אפור החל מהשורה הראשונה.
סגנון החלפה עמודות באותו אופן
אתה יכול לעשות את אותו סוג של סגנון לעמודות בטבלאות שלך. לשם כך, פשוט לשנות את tr בכיתה CSS שלך כדי td. לדוגמה:
td: nth-of-type (מוזר) {
צבע רקע: #ccc;
}
באמצעות נוסחאות ב בורר nth של סוג (n)
התחביר עבור נוסחה המשמשת בבורר הוא + b.
a הוא מספר המייצג את מחזור או גודל המדד.
n הוא למעשה האות "n" ומייצג מונה, אשר כוכבים ב 0.
+ הוא מפעיל, אשר עשוי גם להיות "-"
b הוא מספר שלם ומייצג את הערך אופסט - לדוגמה, כמה שורות למטה אם בורר להתחיל להחיל את צבע הרקע. זה נדרש אם מפעיל נכלל הנוסחה.
לדוגמה, אם ברצונך להגדיר צבע רקע עבור כל שורה שלישית, הנוסחה שלך תהיה 3n + 0. ה- CSS שלך עשוי להיראות כך:
tr: nth-of-type (3n + 0) {tr =
רקע: slategray;
}
כלים שימושיים לשימוש בבורר מסוג nth-of-type
אם אתה מרגיש קצת מדוכדך על ידי היבט הנוסחה של שימוש pseudo בכיתה nth-of- סוג בורר, לנסות את האתר: Nester Tester ככלי שימושי שיכול לעזור לך להגדיר את התחביר כדי להשיג את המראה הרצוי. השתמש בתפריט הנפתח כדי לבחור nth-of-type (אתה יכול גם להתנסות עם אחרים pseudo- כיתות כאן, גם, כגון nth-child).