בורר צאצא
שיעור 8 מתוך 15 בקורס בוררי CSS של Coddy.
בנושא הקודם למדנו על קומבינטור צאצא ישיר, שמכוון לילדים הישירים של רכיב. עכשיו נחקור בוררי צאצאים, שמסומנים באמצעות רווח לבן. בורר צאצאים מאפשר לך לכוון לרכיבים המקוננים בתוך רכיב אחר בכל רמה, ולא רק לילדים הישירים שלו.
תחביר
selector1 selector2 {
/* הצהרות על מאפיינים */
}לדוגמה,
<html>
<head>
<title>Combinator</title>
<style>
div p {
color: red;
font-size: 2em;
}
</style>
</head>
<body>
<div>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>כלל ה-CSS שלמעלה יצבע את שתי הפסקאות באדום ויקבע להן גודל גופן של 2em.
מה הקשר בינו לבין בוררי ילדים?
בורר צאצאים כללי יותר מבורר ילדים. פירוש הדבר הוא שבורר צאצאים יתאים לכל הרכיבים שהם צאצאים של רכיב מסוים, ואילו בורר ילדים יתאים רק לרכיבים שהם צאצאים ישירים של רכיב מסוים.
לדוגמה, הבורר div p יתאים לכל רכיבי p שהם צאצאים של רכיב div, כולל רכיבי p שמקוננים בתוך רכיבי p אחרים. הבורר div > p יתאים רק לרכיבי p שהם צאצאים ישירים של רכיב div.
אתגר
קלבהמשך לתרגיל הקודם, נשתמש באותו מבנה HTML. כתבו כלל CSS באמצעות בורר צאצאים כדי לעצב את כל הפסקאות שבתוך הרכיב .list, בלי קשר לעומק הקינון שלהן. תנו להן צבע, גודל וגופן חדשים לפי בחירתכם
נסו בעצמכם
<html>
<head>
<title>Descendant Selector Exercise</title>
<style>
/* CSS Code goes here */
</style>
</head>
<body>
<div>
<p>This paragraph is not inside a list</p>
<ul class="list">
<li>
<p>This is a paragraph inside a list item.</p>
</li>
<li>
<div>
<p>This is a paragraph inside a nested div within a list item.</p>
</div>
</li>
</ul>
</div>
</body>
</html>
כל השיעורים ביחידה בוררי CSS
תרגלו בעצמכם: Web אונליין