CSS - Selectors - 2, Child & Adjacent Sibling Selectors

בפוסט הקודם דיברנו על סלקטורים ועל סלקטור הצאצאים ( Descendant Selector ), בהמשך נכיר סלקטורים נוספים ונראה בכל שלב איך אפשר לשלב מספר סוגי סלקטורים ליצירת סלקטור מורכב:

Child Selector

סלקטור ילדים דומה מאוד לסלקטור צאצאים מלבד העובדה שהוא מוגבל אך ורק לילדים (מדור ראשון).

הנה תזכורת קצרה למבנה "המשפחתי" של תגיות xhtml:

<ul>
 <li><span>Another</span></li>
 <li><span>Example</span></li>
 <li><span>Of</span></li>
 <li><span>HTML Relations</span></li>
</ul>

התגית span היא הבת של li והנכדה של ul. 

תגיות ה li הן אחיות ובנות ל ul

התגית ul נחשבת לאביהן של li ואב-קדמון ל span.

אנחנו משתמשים ב- Child Selector כאשר אנחנו רוצים להבדיל בין רמות שונות של אותה תגית, למה הכוונה?
בדוגמה הבאה אנו מתייחסים לתגית strong בכמה צורות. כאשר התגית מופיעה בתוך פיסקה, נרצה לצבוע אותה בצבע רקע צהוב (להדגשה) וכאשר היא מופיעה בתוך אלמנט אחר, לא נקבע לה עיצוב (strong בתוך רשימה פשוט מדגישה את הטקסט (bold). הנה התוצאה הרצויה:

<p>
    The following paragraph demonstrates the power of CSS selectors.<br/>
    The following text, for example, <strong>should be marked</strong> using <br/>
    the &lt;strong&gt; tag.
    <ul>
     <li>However, when inserted</li>
     <li>into a list</li>
     <li>the &lt;strong&gt; tag</li>
     <li>should use his <strong>default behaviour</strong></li>
    </ul>
</p>

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

p strong {
    background-color: yellow;
}

p ul strong {
    background-color: transparent;
}

נו אז מה רע בפיתרון הזה?

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

אז אולי בכל זאת יש פתרון, הנה:

p strong {
 background-color: yellow;
}

p * strong {
 background-color: transparent;
}

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

זה ממש כמו לצבוע את כל הבית באפור ואז שוב לצבוע את חדר השינה בלבן כשבסך הכל יכלנו להגיע לאותה תוצאה בפחות זמן וביתר קלות.
הנה שימוש ב Child Selector זהה:

p > strong {
 background-color: yellow;
}

כדי להשתמש בסלקטור הילדים, נוסיף סימן > בין תגית האב לתגית הבן, כאשר ה"חץ" פונה לכיוון הבן.
שימו לב, על ידי הגדרת סלקטור אחד, ספציפי יותר, פתרנו את הבעיה.
שוב, נזכיר שבכל שלב, אפשר לשלב את כל הסלקטורים שראינו עד כה (תרגיל):

div > table td > span, p li > a {
 background-color: green;
}

Adjacent Sibling Selector

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

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

כמובן, כמו תמיד, הדרך הכי טובה לזכור היא על ידי דוגמה.
יהא בלוג (ברוח ההוכחות של חדו"א), המורכב מכותרות h1 ומפסקאות, p (תקצירי מאמרים) הבנוי בצורה הזו:

קוד:

<h3>This Title Has Nothing To Do With The Blog Posts</h2>
<p>
 This paragraph also has nothing to do with the blog posts....
</p>

<h1>This Is A Blog Post Title</h1>
<p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<h1>This Is Another Blog Post Title</h1>
<p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<strong>And so on.. </strong>

 שימו לב שישנם שני סוגי כותרות - הכותרת העליונה, שאינה חלק מרצף המאמרים של הבלוג וכמובן כותרות הבלוג, בנוסף ישנה הפסקה העליונה שאינה חלק מהבלוג ושאר הפסקאות המכילות מאמרים. 

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

דרך אחת (עוקפת) לעשות זאת היא "לעטוף" את הפוסטים והכותרות ב div ולהשתמש בסלקטורים שראינו עד כה, סלקטור צאצאים וסלקטור בנים - אך לשם כך ניאלץ לשכתב את קוד ה html. 

דרך טובה יותר לביצוע המשימה תהיה שימוש בסלקטור אחים סמוכים:

h1+p {
    background-color: #EDECE4;
}

כדי להשתמש בסלקטור, נוסיף סימן + בין הסלקטורים הסמוכים - העיצוב כמובן יתייחס לתגית מצדו הימני של סימן הפלוס. בדוגמה למעלה: כל תגיות ה-p המופיעות מיד לאחר התגית h1.
העיצוב הנ"ל לא יעבוד על הקוד הבא (התגית p לא מופיעה מיד לאחר התגית h1): 

<h1>This Is A Blog Post Title</h1>
<span> Tags: code, html, blog </span>
<p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

כן, נכון, ישנם עוד סלקטורים.. בפוסט הבא.