בורר צאצא
חלק מהיחידה שליטה ב-CSS במסלול ה-HTML של Coddy. שיעור 2 מתוך 43.
הבורר הראשון הוא בורר הצאצא. משתמשים בו כשרוצים לעצב רכיבים שנמצאים בתוך רכיב אחר, גם אם הם מקוננים עמוק. לדוגמה, יש שתי פסקאות בתוך מכל.
<div class="container">
<p>This is a paragraph inside a div.</p& <section>
<p>This is a paragraph inside a section that is inside a div.</p>
</section>
</div>כעת, נשתמש בבורר צאצאים כדי לעצב את כל הפסקאות שבתוך ה-div:
.container p {
color: blue;
}כל הפסקאות בתוך רכיב ה-.container יהפכו לכחולות, אפילו זו המקוננת בתוך רכיב ה-section.
אתגר
קלצרו כלל CSS שבוחר את כל פריטי הרשימה (<li>) שהם צאצאים של רכיב עם המחלקה "navigation" ומשנה את צבע הטקסט שלהם לסגול.
נסו בעצמכם
<html>
<head>
<title>Descendant Selector</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<ul class="navigation">
<li>Home</li>
<li>Team
<ul>
<li>Players</li>
<li>Coaches</li>
</ul>
</li>
<li>Tickets</li>
</ul>
</body>
</html>
בחנו את עצמכםהשיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה שליטה ב-CSS
תרגלו בעצמכם: Web אונליין