مرجع 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>
                

مانند سایر شبه کلاس ها قابلیت استفاده با سایر شبه کلاس ها را دارد. برای مثال می توان در کنار before: یا after: نیز استفاده کرد. به مثال های بخش زیر توجه کنید.

سایر نکات

اگر می خواهید اولین پاراگراف در یک المان را انخاب کنید . خواه پاراگراف مد نظر اولین فرزن باشد یا نه می توانید از شبه کلاس 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 را با استفاده از before: و after: با پرانتز احاطه خواهد کرد.

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.0

پشتیبانی مرورگر

first-child: در کروم ،فایرفاکس ،سافاری ،اپرا +9.5 ،اینترنت اکسپلورر +7 و اندروید وآی او اس ، پشتیبانی می شود.

بیشتر بخوانید

استفاده از این متون آموزشی و کپی برداری از آن ها بلامانع می باشد. توجه شود که ذکر منبع به شدت روحیه دهنده است 😉 .

همچنین منتظر دیدگاه های شما هستیم.