مرجع CSS فارسی
PSEUDO-CLASS
first-child::
شبه کلاسی است که اولین فرزند هر المان را انتخاب میکند.
برای مثال در تکه کد زیر
<article>
<p>
Lorem Ipsum...
</p>
<p>
Another Lorem Ipsum...
</p>
</article>
تکه کد زیر اولین پاراگراف را انتخاب خواهد کرد.
p:first-child {
font-size: 1.5em;
}
تکه کد فوق در تکه کد زیر کار نخواهد کرد . زیرا در تکه کد زیر پاراگراف اولین فرزند المان والد خود نیست.
<div class="container">
<h1>Heading</h1>
<p>
Lorem Ipsum...
</p>
</div>
سایر نکات
اگر می خواهید اولین پاراگراف در یک المان را انخاب کنید . خواه پاراگراف مد نظر اولین فرزن باشد یا نه می توانید از شبه کلاس first-of-type: استفاده کنید. همانطور که از اسم این شبهکلاس مشخص است ، اولین المان مد نظر از منظر نوع المان (مثل پاراگراف) را انتخاب می کند.
مثال ها
فرض کنید تکه کد HTML زیر را داریم.
<article>
<h1>Understanding :first-child</h1>
<p>
This is the first paragraph, but it's not the first child of its parent.
</p>
<p>
This is another paragraph. <span>This is a span inside the paragraph.</span>
</p>
<ul>
<li>First list item</li>
<li>Second list item</li>
<li>Third list item</li>
</ul>
</article>
دستور زیر المان span داخل پاراگراف دوم را انتخاب خواهد کرد.
span:first-child {
color: grey;
}
دستور زیر اولین آیتم لیست را انتتخاب خواهد کرد.
li:first-child {
text-decoration: underline;
color: deepPink;
}
دستور زیر هیچ کدام از پاراگراف ها را انتخاب نخواهد کرد. زیرا هیچ کدام اولین فرزند والد خود نیستند..
p:first-child {
font-size: 1.5em;
}
span:first-child::before {
content: "(";
color: deepPink;
}
span:first-child::after {
content: ")";
color: deepPink;
}
See the Pen :first-child CSS examples by alishooti (@alishooti) on CodePen.
پشتیبانی مرورگر
first-child: در کروم ،فایرفاکس ،سافاری ،اپرا +9.5 ،اینترنت اکسپلورر +7 و اندروید وآی او اس ، پشتیبانی می شود.
بیشتر بخوانید
استفاده از این متون آموزشی و کپی برداری از آن ها بلامانع می باشد. توجه شود که ذکر منبع به شدت روحیه دهنده است 😉 .
همچنین منتظر دیدگاه های شما هستیم.