כוחם של דפוסים: שימוש ב־nth-child
חלק מהיחידה שליטה ב-CSS במסלול ה-HTML של Coddy. שיעור 15 מתוך 43.
המחלקה המדומה :nth-child() בוחרת אלמנטים לפי הסדר שלהם בתוך הורה, באמצעות מספר או תבנית כדי לבחור אילו מהם.
לדוגמה, יש לנו רשימה:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
<li>Fifth item</li>
</ul>כך בוחרים פריטי רשימה שמספרם זוגי:
li:nth-child(even) {
background-color: lightblue;
}כך אנחנו בוחרים את הפריט השלישי:
li:nth-child(3) {
font-weight: bold;
}כך בוחרים כל פריט חמישי:
li:nth-child(5n) {
color: red;
}
אתגר
קלצרו כלל CSS באמצעות :nth-child() כדי לתת לכל <div> שלישי רקע צהוב.
נסו בעצמכם
<!DOCTYPE html>
<html>
<head>
<title>Pattern Power: Using nth-child</title>
<style>
/* Write your CSS rule here */
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
<div>Item 7</div>
<div>Item 8</div>
<div>Item 9</div>
<div>Item 10</div>
</div>
</body>
</html>
בחנו את עצמכםהשיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה שליטה ב-CSS
3פסאודו־מחלקות מבניות
פסאודו־מחלקות מבניותבחירת הילד הראשוןבחירת הילד האחרוןכוחם של דפוסים: שימוש ב־nth-childאתגר סיכוםתרגלו בעצמכם: Web אונליין