סלקטור "אח" – Siblings בCSS

הקדמה

בקוד HTML, האלמנטים בנויים בצורה של איזשהו עץ משפחה. יש את אלמנט הhtml, שהוא מה שמכונה root – השורש של העץ שלנו. לhtml תמיד יש 2 בנים ישירים – head, body. אלו הם בנים ישירים. יש לו גם צאצאים לא ישירים, לדוגמה div, nav, .myHeader וכל האלמנטים שנמצאים בתוכו. הפוסט הזה ידריך אתכם איך להשתמש בסלקטור של CSS ב"אח" – siblings – של האלמנט שאליו רוצים להתייחס.
ניקח לנו קוד HTML שילווה אותנו לאורך הפוסט:

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

.parent .child{}

אנחנו מצביעים על כל מי שעם הקלאס child שהינו צאצא של הקלאס parent.

body .child{}

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

מהם אחים בHTML ואיך ניתן לגשת אליהם

אם נמשיך אם אותו כיוון של "עץ משפחה" שאיתו התחלנו, כשיש לנו .parent ויש לו מספר בנים ישירים, הרי שכל הבנים שלו הינם אחים. במילים אחרות, אלמנטים אחים הינם אלמנטים שנמצאים יחד על אותו ענף של HTML והינם בנים של אותו אלמנט אב.
בCSS ניתן לגשת בין אחים, אח ניתן להתייחס (= להיות מיוחס) רק אחרי אחים שכתובים בHTML לפני האלמנט שעליו מצביעים (אחיו הגדולים), ולא אחים שכתובים אחריו בHTML. נכון לCSS3 לא ניתן לייחס אלמנט אחרי אחיו הצעירים בסלקטור שלנו.
ישנם שתי תווים שיעזרו לנו לעשות את הייחוס הזה. הראשון הינו סימן פלוס (+) והשני סימן טילדה (~). הפלוס אומר שאנחנו מדברים על אלמנט שנמצא מיד אחרי אלמנט אחר (אח ישיר), והטילדה אומרת שאנחנו מדברים על אלמנט שיש לו אח גדול כלשהו לפניו שעונה על הקריטריונים שכתבנו.

נתחיל בדוגמאות פשוטות

.x + .y{}

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

.x ~ .y

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

ונדגיש שוב את ההבדל בין + לבין ~. כשמשתמשים בסימן + הכוונה למי שאחיו הקודם תואם את ההגדרה שלפני ה+. כשמשתמשים ב~ הכוונה למי שיש לו לפניו אח קודם כלשהו שתואם את הסלקטור שלפני ה~.

נחזור עכשיו לקוד הHTML שכתבנו למעלה, וניתן דוגמאות עליו.

span + span

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

דוגמה נוספת:

.parent .child ~ .child

כעת אנחנו פונים לכל קלאס child שיש לו אח כלשהו לפניו שיש לו את הקלאס child, והוא צאצא של הקלאס parent. בHTML שלנו מדובר באלמנטים second, third.

שימו לב, גם האלמנט שעליו מצביעים שלנו יהיה צאצא של .parent, אבל זה לא מעניין אותנו ביחס לאלמנט עצמו אלא ביחס ל"אחיו הגדול".

מתי משתמשים בסלקטור אח

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

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

.grayRow{
    background: #ccc;
    font-weight: bold;
}
.grayRow+ grayRow{
    font-weight: normal;
}

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

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

בהצלחה רבה