סלקטורים ב- CSS: חלק ב', אלמנטים יחסיים לאלמטים אחרים

במאמר זה הסביר איך לבחור אלמטים שנמצאים תחת אלמנטים אחרים.

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

 

<div>
  <span>
    first span inside div
  </span>
  <p>
    <span>
      first span inside paragraph
    </span>
    <span>
      second span inside paragraph
    </span>
  </p>
  <span>
    second span inside div
  </span>
  <span>
    third span inside div
  </span>
</div>

 וזאת התוצאה לפני שניישם עליהם שינויים באמצעות CSS

 

 

 

 

 

אלמנטים שנמצאים תחת אלמט אחר

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

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

div span {color:red;}

 

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

 

 

 

 

 

 

אלמנטים שהם ילדים ישירים של אלמנט אחר

באפשרות זו, נרצה לבחור רק את האלמנטים שהם תחת אותו אלמנט בדיוק, ז"א, שאם הם יש אלמנט אחר שעוטף את האלמנט שנרצה, לא נקבלת את האלמנט העטוף.

בדוגמא הבאה נצבע באדום את כל האלמנטים מסוג span שהאב הישיר שלהם הוא div. שימו לב שכל האלמנטים מסוג span שנמצאים תחת p, לא יצבעו באדום מכיון שהם בנים ישירים של p ולא של div.

div > span {color:red;}

ולתוצאה שנקבל:

 

 

 

 

 

אלמנטים שהם אחים שמופיעים אחרי אלמנט אחר

כלומר, אלמטים שמופיעים אחרי אלמנט אחר (שימו לב שהכוונה היא לא בתוכו).

בדוגמא שלנו אני אחפש את כל האלמנטים מסוג span שמופעים אחרי p, וזה יגרום לסימון של שני ה-span האחרונים.

ה-span הראשון לא יסומן מפני שהוא מופיע לפני ה-p ולא אחריו.

p ~ span {color:red;}

 

 

תוצאה:

 

 

 

 

 

 

אלמנטים שהם אחים ישירים שמופיעים אחרי אלמנט אחר

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

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

p + span {color:red;}

 

 

 תוצאה:

 

 

 

 

 

 

 

אם אתם מעוניינים לשחק עם הדוגמאות ניתן למצוא אותם ב-Codepen

 

 

הערות

* מכיוון שככל שהביטוי יכולל יותר אבות / בנים / אחים, כלומר, יהיו בו יותר אלמנטים אז זמן הריצה יהיה יותר ארוך. למרות שב CSS זה יהיה פחות מורגש עדיין מומלץ לא להגדיר יותר מדי אלמנטים. אני ממליץ על לא לעבור את ה-3 אלמנטים.

דוגמא:

.test //faster
body div ul li a .test //slower

 

 

 

 

 

 

 

 

תגיות:

הוסף תגובה