בורר ילד
שיעור 7 מתוך 15 בקורס בוררי CSS של Coddy.
בורר צאצא הוא סוג של בורר CSS שבוחר את כל האלמנטים שהם ילדים ישירים של אלמנט מסוים. בורר הצאצא מסומן בסימן גדול מ־(>) בין שני בוררים.
דוגמה:
נבחן את מבנה ה־HTML הבא:
<div class="parent">
<p>This is a direct child paragraph.</p>
<div>
<p>This is an indirect child paragraph.</p>
</div>
</div>כדי לבחור את פסקת הילד הישיר, יש להשתמש בקומבינטור צאצא כך:
.parent > p {
color: blue;
}בדוגמה הזו, רק פסקת הילד הישיר תהפוך לכחולה, ולא הפסקה המקוננת בתוך ה־<div> הפנימי.
אפשר להשתמש בבוררי צאצא גם כדי להימנע מהחלת סגנון על אלמנטים שאינם ילדים ישירים של אלמנט מסוים. לדוגמה, אפשר להשתמש בבורר צאצא כדי לעצב באדום את כל הקישורים שהם ילדים ישירים של אלמנט p.
אתגר
קלבהינתן מבנה ה-HTML הבא, צרו כלל CSS באמצעות קומבינטור צאצא ישיר כדי לעצב את פריטי הרשימה הישירים בתוך האלמנט <ul> כך שצבע הרקע שלהם יהיה צהוב.
נסו בעצמכם
<html>
<head>
<title>Child Selector Exercise</title>
<style>
/* CSS Code goes here */
</style>
</head>
<body>
<ul class="list">
<li>This is a direct list item.</li>
<div>
<li>This is an indirect list item.</li>
</div>
</ul>
</body>
</html>כל השיעורים ביחידה בוררי CSS
תרגלו בעצמכם: Web אונליין