English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:first-child هي صفة pseudo-class في CSS تعبر عن العنصر الأول في مجموعة من الإخوة.
يُناسب <p> العنصر الأول من العنصر الأم <p>.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>دليل الأساسيات (oldtoolbag.com)</title>
<style>
p:first-child
{
background-color:orange;
}
</style>
</head>
<body>
<p>الفقرة الأولى من المحتوى الرئيسي.</p>
<h1>مرحبًا، صفحة شخصية</h1>
<p>هذه الفقرة ليست الطفل الأول من родية.</p>
<div>
<p>هذه الفقرة تحتوي على Div.</p>
<p>هذا ليس الفقرة الأولى.</p>
</div>
<p><b>ملاحظة:</b> :first-child يعمل على متصفحات Internet Explorer 8 وكل الأصدار السابقة، يجب أن تكون DOCTYPE قد تم إعلانها.</p>
</body>
</html>اختبار لرؤية ‹/›:first-child المصفوفة تطابق أولى الأبناء للعنصر الأب.
الرقم في الجدول يمثل إصدار المتصفح الأول الذي يدعم هذه الخاصية.
| المصفوفات | |||||
|---|---|---|---|---|---|
| :first-child | 4.0 | 7.0 | 3.0 | 3.1 | 9.6 |
ملاحظة: :first-child يجب أن يتم إعلانه في إصدارات IE8 وأقدم إصدارات IE.<!DOCTYPE>
دليل CSS: الصيغ المزيفة CSS
اختيار كل <i> داخل كل <p> وتعيين نمطها، حيث يكون <p> أولى الأبناء للعنصر الأب:</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>دليل الأساسيات (oldtoolbag.com)</title>
<style>
p:first-child i
{
background:yellow;
}
</style>
</head>
<body>
<p>أنا <i>رجل</i> قوي. أنا <i>رجل</i> قوي.</p>
<p>أنا <i>رجل</i> قوي. أنا <i>رجل</i> قوي.</p>
<p><b>ملاحظة:</b> :first-child يعمل على IE8 وأقدم إصدارات المتصفحات، يجب أن يتم إعلان DOCTYPE.</p>
</body>
</html>اختبار لرؤية ‹/›نمط اختيار أولى العناصر <li> في القائمة:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>دليل الأساسيات (oldtoolbag.com)</title>
<style>
li:first-child
{
background:yellow;
}
</style>
</head>
<body>
<ul>
<li>قهوة</li>
<li>شاي</li>
<li>Coca Cola</li>
</ul>
<ol>
<li>قهوة</li>
<li>شاي</li>
<li>Coca Cola</li>
</ol>
<p><b>ملاحظة:</b> :first-child يعمل على IE8 وأقدم إصدارات المتصفحات، يجب أن يتم إعلان DOCTYPE.</p>
</body>
</html>اختبار لرؤية ‹/›نمط اختيار أولى الأبناء لكل عنصر <ul>:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>دليل الأساسيات (oldtoolbag.com)</title>
<style>
ul>:first-child
{
background:yellow;
}
</style>
</head>
<body>
<ul>
<li>قهوة</li>
<li>شاي</li>
<li>Coca Cola</li>
</ul>
<ul>
<li>قهوة</li>
<li>شاي</li>
<li>Coca Cola</li>
</ul>
<p><b>ملاحظة:</b> :first-child يعمل على IE8 وأقدم إصدارات المتصفحات، يجب أن يتم إعلان DOCTYPE.</p>
</body>
</html>اختبار لرؤية ‹/›