בורר אח סמוך

שיעור 9 מתוך 15 בקורס בוררי CSS של Coddy.

בואו נצלול לבוררי אחים סמוכים. בוררים אלה מכוונים לאלמנטים שיש להם אותו הורה ומופיעים מיד אחרי האלמנט שנבחר. בורר אחים סמוכים הוא בורר CSS שבוחר את כל האלמנטים שהם אחים של אלמנט מסוים וצמודים אליו מיד. בורר האחים הסמוכים מסומן בסימן פלוס (+) בין שני בוררים.

תחביר

former_element + target_element {
  /* מאפייני עיצוב */
}

נניח שיש לנו את מבנה ה-HTML הזה:

<div class="container">
   <p>First paragraph</p>
   <span>Adjacent span</span>
   <p>Second paragraph</p>
</div>

כדי לעצב את <span> שמופיע מיד אחרי פסקה, יש להשתמש בבורר האחים הסמוכים:

p + span {
   font-weight: bold;
}

במקרה הזה, ל-"Adjacent span" יהיה משקל גופן מודגש.

אתגר

קל

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

נסו בעצמכם

<html>
<head>
    <title>Adjacent Sibling Selector Exercise</title>
    <style>
        /* CSS Code goes here */
    </style>
</head>
<body>
    
</body>
</html>

כל השיעורים ביחידה בוררי CSS

1מבוא לבוררי CSS

מטרת בוררי CSS למה הם חשובים?

4בוררי מאפיינים

מבוא לבוררי מאפיינים נוכחות וערכים מדויקים בוררי ערכי מאפיינים בוררי ערכי מאפיינים II בוררי ערכי מאפיינים III

2בוררים פשוטים

בוררי סוג בוררי מחלקה בוררי מזהה בוררים אוניברסליים

3בוררי קומבינטורים

בורר ילד בורר צאצאבורר אח סמוךבורר אחים כללי

תרגלו בעצמכם: Web אונליין