الطفل الأول، وهو محدد CSS (الطفل الأول)، يمكّننا من تطبيق نمط العنصر الأول مباشرة على العنصر الآخر. وفقًا لمواصفات المستوى 3 لمحددات CSS، يشار إليها على أنها فئة زائفة هيكلية نظرًا لأنها تعتمد على نمط أي محتوى على كيفية ارتباطه بالمحتوى الأصلي والأخوة.
بناء الجملة
قراءة ملف CSV في جافا
:first-child { //property } مثال
h1:first-child { color: blue; } <p> <span>Let's get started</span></p> انتاج |
توضيح:
- تشتمل علامتا div على الكتلة الأساسية في الكود أعلاه.
- هناك العديد من علامات الفقرة
مع علامات مبكرة مختلفة داخل عنصر div الأول.
- علامة رأس وعلامة فقرة
مع علامة مبكرة يتم تضمينهما ضمن علامة div الأخرى.
- لقد قمنا بتطبيق CSS داخليًا أو مضمنًا داخل كتلة الرأس وقمنا بتصميم علامة اللقطة داخل علامة الفقرة. ومع ذلك، لسنا مطالبين بإنشاء فئة للعلامة المفاجئة؛ بدلاً من ذلك، يمكننا استخدام محدد الطفل الأول (p:first-child) لتحديد عنصر علامة snap الأولى داخل علامة div الأولى على الفور. يمكننا أن نعطي العنصر الأولي (المفاجئة) بعض الأناقة. توجد علامتان سريعتان داخل الفقرة، ولكن كما نرى، تم تصميم العلامة الأولى فقط، وتم تجاهل العلامات الأخرى.
- يمكننا أن نرى كيف بحث الطفل الأول عن علامة Snap الأولى وقام بتصميمها في علامة div الثانية. يجب أن يكون العنصر هو العنصر الأول بين أشقائه داخل العلامة الأصل ليتم استهدافه من قبل الطفل الأول؛ وإلا فلن يتم اختياره.
باستخدامعلامة الصف
باستخدام علامة الصف
بناء الجملة
tr:first-child{ //CSS declarations with style properties; } مثال
للحصول على فهم أفضل، دعونا نلقي نظرة على مثال على أول 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> انتاج |
توضيح:
- يحتوي الجزء الأساسي من الكود أعلاه على علامات جدول لمعلومات الطالب
.
- هناك عدة صفوف من العلامات
داخل علامة الجدول ، وتحتوي علامة الصف الأول على رؤوس مثل رقم الطالب واسمه وعلاماته. يتم تضمين بيانات الطالب في علامات الصفوف المتبقية.
- لتصميم علامة الصف
داخل علامة الجدول لقد قمنا بتطبيق CSS داخليًا أو مضمنًا داخل كتلة الرأس. ومع ذلك، ليس مطلوبًا منا إنشاء فئة لعلامة الصف؛ بدلاً من ذلك، نحن ببساطة نستخدم محدد الطفل الأول (p:first-child)، والذي سيتعرف تلقائيًا على عنصر علامة الصف الأول مباشرة داخل علامة الجدول. يمكننا تصميم علامة الصف، وهو العنصر الأول. هناك عدة صفوف من العلامات داخل الجدول. ومع ذلك، كما نرى، يتم تصميم العلامة الأولى بينما يتم تجاهل الباقي.
خاتمة
لقد تعرفنا على الطفل الأول لـ CSS في هذه المقالة. فيما يلي خلاصة الطفل الأول في المقالة:
- في CSS، يتيح لنا محدد الطفل الأول (:first-child) إمكانية تطبيق نمط العنصر الأول فورًا على العنصر الآخر.
- يقوم الطفل الأول بتصميم المادة بناءً على مدى ارتباطها بمحتوى والديه وإخوته.
- الفئة الزائفة التي هي عضو في الفئات القائمة على الموضع والبنية هي الطفل الأول. بدون التحقق من وجود المزيد من الأشقاء (العناصر) من نفس النوع، سيحاول الفصل الأول المطابقة مع الطفل المباشر الأول للوالد.