בורר ילד

חלק מהיחידה שליטה ב-CSS במסלול ה-HTML של Coddy. שיעור 3 מתוך 43.

בורר הצאצא הישיר ( > ) משמש כשאנחנו רוצים לעצב רכיבים שהם ילדים ישירים של רכיב אחר. בניגוד לבורר הצאצאים, הוא בוחר רק ילדים ישירים ולא צאצאים עמוקים יותר.

לדוגמה:

<div class="parent">
  <p>This is a direct child</p>
  <section>
    <p>This is a grandchild (not a direct child)</p>
  </section>
</div>

החל סגנון על ילדים ישירים בלבד:

.parent > p {
  color: red;
}

לאחר החלת CSS זה, רק הפסקה הראשונה "This is a direct child" תהיה אדומה. הפסקה השנייה לא תושפע, כי היא אינה צאצא ישיר של ה-div עם המחלקה "parent".

אתגר

קל

יש לך .team-container שמכיל כמה מקטעי צוות. המשימה שלך היא:

השתמש בבורר צאצא כדי לעצב תגי div שהם ילדים ישירים בתוך .team-container עם רקע כחול בהיר, ריווח פנימי של 10px וריווח חיצוני של 5px.
השתמש בבורר צאצא כדי לעצב רכיבי <h3> שהם ילדים ישירים בתוך תגי div מסוג .team בצבע ירוק ובגודל גופן של 20px.

נסו בעצמכם

<html>
<head>
    <title>Child Selector</title>
    <style>
       /* Write CSS rules here */
       
    </style>
</head>
<body>
    <div class="team-container">
        <div class="team">
            <h3>Basketball Team</h3>
            <ul>
                <li>LeBron James</li>
                <li>Stephen Curry</li>
                <li>Kevin Durant</li>
            </ul>
        </div>
        <div class="team">
            <h3>Football Team</h3>
            <ul>
                <li>Tom Brady</li>
                <li>Patrick Mahomes</li>
                <li>Davante Adams</li>
            </ul>
        </div>
        <div class="team">
            <h3>Soccer Team</h3>
            <ul>
                <li>Lionel Messi</li>
                <li>Cristiano Ronaldo</li>
                <li>Neymar Jr.</li>
            </ul>
        </div>
    </div>
</body>
</html>