الصنف :first-child
< CSS
اذهب إلى التنقل
اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
الصنف الزائف :first-child
في CSS (أي pseudo-class) يُمثِّل أوّل عنصر في مجموعة من العناصر الأخوة (sibling elements).
المُحدِّد الآتي سيُحدِّد أوّل عنصر <p>
من بين أخوته:
p:first-child {
color: lime;
}
ملاحظة: عندما عُرِّف هذا الصنف كان من الضروري أن يملك العنصر أبًا، لكن بدءًا من مواصفة Selectors Level 4 لم يعد ذلك ضروريًا. الشكل العام لهذا المحدد:
:first-child
أمثلة
لاحظ كيف سيُحدَّد أوّل عنصر <p>
من بين العناصر الأخوة له:
<div>
<p>هذا النص محدد</p>
<p>هذا النص غير محدد</p>
</div>
<div>
<h2>هذا النص غير محدد إنه عنصر `p`.</h2>
<p>هذا النص غير محدد</p>
</div>
شيفرة CSS:
p:first-child {
color: lime;
background-color: black;
padding: 5px;
}
مثال عن تحديد أوّل عنصر <li>
ضمن قائمة غير مرتبة <ul>
:
<ul>
<li>العنصر 1</li>
<li>العنصر 2</li>
<li>العنصر 3
<ul>
<li>العنصر 3.1</li>
<li>العنصر 3.2</li>
<li>العنصر 3.3</li>
</ul>
</li>
</ul>
شيفرة CSS:
ul li {
color: blue;
}
ul li:first-child {
color: red;
font-weight: bold;
}
دعم المتصفحات
الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
الدعم الأساسي | 4.0 | 3.0 | 7 | 9.5 | 4 |
عدم الحاجة إلى وجود عنصر أب | 57 | 51 | ؟ | 44 | ؟ |
انظر أيضًا
- صفحة الصنف الزائف
first:
الذي يُمثِّل أوّل صفحة من المستند عند طباعته. - صفحة الصنف الزائف
empty:
الذي يُمثِّل أي عنصر ليس له أبناء. - صفحة الصنف الزائف
first-of-type:
الذي يُمثِّل أوّل عنصر من نوعه في مجموعة من العناصر الأخوة.
مصادر ومواصفات
- مسودة Selectors Level 4.
- مواصفة Selectors Level 3.
- مواصفة CSS Level 2 (Revision 1).