הילד הראשון, בורר CSS (ילד ראשון), מאפשר לנו להחיל את הסגנון של האלמנט הראשון ישירות על האלמנט השני. לפי מפרט CSS Selectors Level 3, הוא מכונה פסאודו-מחלקה מבנית מכיוון שהוא מבסס את הסגנון של כל תוכן על האופן שבו הוא מתייחס לתוכן ההורה והאחי שלו.

תחביר

 :first-child { //property } 

דוגמא

 h1:first-child { color: blue; } <p> <span>Let&apos;s get started</span></p> 

תְפוּקָה

הֶסבֵּר:

1. שני תגי div מהווים את בלוק הגוף בקוד למעלה.
2. יש הרבה תגי פסקה

   עם תגיות Snap שונות בתוך אלמנט ה-div הראשון.

3. תג כותרת ותג פסקה

   עם תג snap נכללים שניהם בתוך תג ה-div השני.

4. החלנו CSS פנימי או מוטבע בתוך בלוק ה-head ועיצבנו את תג ה-Snap בתוך תג הפסקה. עם זאת, איננו נדרשים ליצור מחלקה עבור תג ה-Snap; במקום זאת, נוכל להשתמש בבורר הילד הראשון (p:first-child) כדי לזהות באופן מיידי את רכיב תג הצמד הראשון בתוך תג ה-div הראשון. אנחנו יכולים לתת לאלמנט ההתחלתי (סנאפ) קצת סגנון. יש שתי תגיות הצמד בתוך הפסקה, אבל כפי שאנו יכולים לראות, רק התג הראשון מעוצב, והאחרים זכו להתעלמות.
5. אנו יכולים לראות כיצד הילד הראשון חיפש את תגית ה-Snap הראשון ועיצב אותה בתג ה-div השני. האלמנט חייב להיות האלמנט הראשון מבין האחים שלו בתוך תג האב כדי להיות ממוקד על ידי הילד הראשון; אחרת, הוא לא ייבחר.

משתמש בתג שורה

שימוש בתג שורה, נוכל ליישם את הילד הראשון של CSS. כתוצאה מכך, אם נחיל סגנון על תג השורה באמצעות בורר הילד הראשון, רק תג השורה הראשונה יעוצב, ושאר תג השורה לא יעוצב. הילד הראשון ימקד את רכיב השורה הראשונה בתוך תג האב, והשאר יתעלמו.

תחביר

 tr:first-child{ //CSS declarations with style properties; } 

דוגמא

להבנה טובה יותר, בואו נסתכל על דוגמה של ה-CSS הילד הראשון באמצעות תג rowב-CSS.

 Example of First Child in CSS using row tag tr:first-child { font-size: 40pixels; color: black; background-color: lightblue; } <table class="table"> <tr> <th>Name</th> <th>ID</th> <th>Branch</th> </tr> <tr> <th>Priya</th> <th>123</th> <th>CSE</th> </tr> <tr> <th>John</th> <th>435</th> <th>ECE</th> </tr> <tr> <th>David</th> <th>544</th> <th>MECH</th> </tr> <tr> <th>Sushma</th> <th>765</th> <th>CIVIL</th> </tr> </table> 

תְפוּקָה

הֶסבֵּר:

1. בלוק הגוף של הקוד למעלה מכיל תגיות טבלה עבור מידע התלמיד.
2. ישנן מספר שורות של תגיםבתוך תג הטבלה, ולתג השורה הראשונה יש כותרות כמו מספר המחזור, השם והסימנים של התלמיד. נתוני התלמיד כלולים בתגי השורה הנותרים.
3. לעיצוב תג השורהבתוך תג הטבלה, החלנו CSS פנימי או מוטבע בתוך בלוק הראש. עם זאת, איננו נדרשים ליצור מחלקה עבור תג השורה; במקום זאת, אנו פשוט משתמשים בבורר הילד הראשון (p:first-child), שיזהה אוטומטית את רכיב התג בשורה הראשונה ממש בתוך תג הטבלה. אנו עשויים לעצב את תג השורה, שהוא האלמנט הראשון. יש כמה שורות של תגים בתוך הטבלה. עם זאת, כפי שאנו יכולים לראות, התג הראשון מקבל סגנון בעוד השאר מתעלמים.

סיכום

למדנו על הילד הראשון של CSS במאמר זה. להלן מסקנה של ילד ראשון במאמר:

1. ב-CSS, בורר הילד הראשון (:first-child) מאפשר לנו להחיל מיד את הסגנון של האלמנט הראשון על האלמנט השני.
2. הילד הראשון מעצב את החומר על סמך האופן שבו הוא מתייחס לתוכן של הוריו ואחיו.
3. כיתת פסאודו שהיא חברה בכיתות מבוססות עמדה ומבוססות מבנה היא הילד הראשון. מבלי לבדוק עוד אחים (אלמנטים) מאותו סוג, הכיתה הראשונה תנסה להתאים לילד המיידי הראשון של ההורה.