בחירת הילד הראשון

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

מחלקת הפסאודו :first-child מכוונת לאלמנט הראשון בקבוצה של אלמנטים אחים.

לדוגמה:

<section>
  <p>This paragraph will be blue and bold.</p>
  <p>This paragraph will have default styling.</p>
</section>

כל פסקה שהיא רכיב הצאצא הראשון בתוך רכיב האב שלה תיצבע בכחול והטקסט שלה יהיה מודגש.

p:first-child {
  color: blue;
  font-weight: bold;
}

אפשר לשלב ולהחיל בוררים של צאצאים, ילדים ובוררים אחרים כדי לבחור רכיבים באופן ספציפי יותר. הנה דוגמה נוספת:

div:first-child h1 {
 color: red;
}

פעולה זו בוחרת את רכיב ה-div הראשון מבין האחים שלו, ואז משנה את צבע הטקסט של תגית <h1> שבתוכו לאדום.

אתגר

קל

צרו כלל CSS שמכוון לפריט הראשון ברשימה (<li>) בכל רשימה לא מסודרת (<ul>) ומעצב אותו כך:

צבע טקסט כחול
צבע רקע צהוב בהיר
ריפוד שמאלי של 10 פיקסלים

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
    <title>Targeting the First Child</title>
  <style>
    /* Write your CSS rule here */
    
  </style>
</head>
<body>
  <h2>Grocery List</h2>
  <ul>
    <li>Fresh Apples</li>
    <li>Organic Bananas</li>
    <li>Whole Wheat Bread</li>
  </ul>
  
  <h2>To-Do List for the Day</h2>
  <ul>
    <li>Complete coding challenge</li>
    <li>Go for a walk in the park</li>
  </ul>
</body>
</html>