פריסת הטקסט והתוכן של אתר עם קוד HTML הוא רק 'נתח' אחד של הבניין הקצה הקדמי של אתר. נתח גדול נוסף של התהליך הזה הוא יצירת הסגנון הוויזואלי, אשר נשלט על ידי הכללים של CSS.
בכל פעם שאנחנו בונים אתר חדש או מבצעים שינויים משמעותיים בפריסה לאתר קיים, אנו בהכרח רוצים שחלקים ספציפיים באתר שלנו יראו בצורה מסוימת. על מנת לעשות זאת, חשוב להבין כיצד להשתמש במגוון משלבי CSS, כגון בורר הצאצאים של CSS. משלב CSS זה מאפשר לחלקים גדולים באתר לקבל את אותם שינויים בסגנון בבת אחת.
מהו בורר צאצאי CSS?
בורר הצאצאים של CSS הוא אחד מארבעה משלבים שונים של CSS. בעת הוספת רווח בודד () בין שני סלקטורים, אותם אלמנטים בסגנון יחולו גם על הבורר השני, בהתחשב בכך שהצאצאים חולקים את אותו בורר ראשון.
כדי להבין בורר צאצאי CSS, עליך קודם להבין בוחרי CSS. הדרך הטובה ביותר לתאר בורר היא שמדובר במפעיל CSS שמזהה את פיסת ה- HTML שאתה מנסה לעצב. זה נקרא בורר מכיוון שהוא "בוחר" איזה קטע של HTML חולק אותו אופרטור כמו ההורה של CSS.
דוגמאות נפוצות למפעילים כאלה הם:
div
זהו תג המגדיר קטע של HTML, שיכול לכלול דברים כמו פסקאות ותוכן, או:
li
שהיא רשימה מסודרת. תגית דומה נוספת היא:
ul
זה יוצר רשימה לא מסודרת. דפוסים מורכבים יותר מכונים גם בוחרים. במילים פשוטות, בורר צאצאי CSS אומר לאתר איך להיראות כאשר בורר אחד 'מקונן' מתחת לאב קדמון משותף.
הסלקטור הראשון הופך להורה CSS, או לבורר 'האב הקדמון', והבורר השני הופך לצאצא. חשוב כיצד פועלת ספריית קבצים: ההורה של CSS הוא כמו תיקיה המכילה תיקיות אחרות, שיכולות להכיל תיקיות משלהן.
מבין ארבעת המשלבים, היחיד שבוחר את כל מה שמקנן מתחת להורה CSS ספציפי הוא בורר הצאצאים של CSS. ישנם שלושה קומביננטים נוספים.
- בורר הילדים ('>' במקום רווח יחיד) רק בוחר אלמנטים אליהם מכוון הסלקטור הראשון בקומבינטור. אם הבורר הראשון הוא (div) והבורר השני הוא (p), רק (p) נבחר כל עוד יש לו (div) כאב קדמון. אם נוצרת פסקה תחת חדש (קטע), גם אם היא באותו (div), כללי הסגנון לא נשמרים.
- בורר האחים הסמוך ('+' במקום רווח יחיד) רק בוחר את האלמנט הקרוב ביותר לבורר השני בקומבינטור. אם הבורר הראשון הוא (div) והבורר השני הוא (p), נבחר האלמנט הראשון שמשתמש ב- (p) אך לא (div).
- בורר האחים הכללי ('~' במקום רווח יחיד) בוחר כל אלמנט פרט לאלה שהבורר השני מתייחס אליו. אם הבורר הראשון הוא (div) והבורר השני הוא (p), כל אלמנט שאינו (p) נבחר.
איך נראה בורר צאצאי CSS?
בדוגמה הבאה של שני בוחרי צאצאים שונים של CSS הפועלים זה לצד זה, (div) הוא הבורר הראשון בשילוב הראשון, ואילו (ul) הוא הבורר הראשון בשני קומבינטור. בשני בוחרי הצאצאים של CSS, (p) משמש כבורר השני.
מרכיבי הסגנון נבדלים בין (div) ל- (ul), אך (p) נושא בבירור את התכונות של ההורה CSS בשני המקרים.
מדוע להשתמש בבורר צאצאי CSS?
כדי להבין את החשיבות של בורר הצאצאים של CSS, כדאי להבין תחילה את הסלקטורים המקוננים של CSS.
בדרך כלל אנו רוצים שכללי סגנון מסוימים יחולו על כל אתר אינטרנט, כגון הגודל או הגופן הספציפיים שכל טקסט הפיסקה (p) משתמש כברירת מחדל. כמו כן, HTML יכול להתחיל להראות מבולגן אם כללי סגנון אלה מוחלים על כל פיסקה בודדת ולא על כל האתר.
CSS מקונן אפשרי באמצעות שילוב CSS כגון בורר הצאצאים CSS. על ידי "קינון" CSS מתחת לבורר הורים, ניתן לספר לאתר במהירות וביעילות איך אמור להראות בורר ספציפי בכל תרחיש אליו מתייחס ההורה CSS.
שימוש בבורר CSS מקונן מאפשר לנו ליישם את אותם כללים לעיצוב מספר חלקים באתר בו זמנית, ומאפשר לנו להסתדר עם פחות עבודה תוך שמירה על HTML נקי ובתולי.