مرجع CSS فارسی

PSEUDO-CLASS

first-of-type:

شبه کلاسی است که اولین المان از نوع مشخص شده ایی را انتخاب می کند.

به عبارت دیگر برای انتخاب اولین نوع یک المان از first-of-type: استفاده می کنیم. در مثال زیر این شبه کلاس ، اولین پاراگراف را انتخاب می کند.

<article>
    <h1>Article Title</h1>
    <p>
        First paragraph.
    </p>
    <p>
        Second paragraph.
    </p>
    <!-- .... -->
</article>
                
p:first-of-type {
    font-size: 1.5em;
}
                
سایر نکات

رفتار first-of-type: شبیه به first-child: است. با این تفاوت که first-of-type: اولین پاراگراف در مثال فوق را انتخاب کرده است. خواه این که اولین فرزن المان والد خود است یا خیر . پس تکه کد زیر :

p:first-child {
    font-size: 1.5em;
}
                

پاراگراف مثال معرفی شده را استایل دهی نمی کند. زیرا اولین فرزند والد خود نیست . درباره ی شبه کلاس first-child: و کاربرد آن بیشتر مطالعه کنید.

first-of-type: نیز مانند سایر شبه کلاس ها می تواند در کنار دیگر شبه کلاس ها مانند before: یا after: استفاده شود . در مثال زیر برخی از ویژگی های این شبه کلاس را در CSS مشاهده خواهید کرد.

مثال ها

فرض کنید تکه کد HTML زیر را داریم.

<div class="container">
    <h1>Title</h1>
    <nav>
        <ul>
            <li>First Item</li>
            <li>Second Item</li>
            <li>Third Item</li>
            <li>Fourth Item</li>
        </ul>
    </nav>
    <article>
        <h2>Title</h2>
        <p>
            Lorem Ipsum... <a href="#">Link</a>... <a href="#">another Link</a>
        </p>
        <p>
            Lorem Ipsum...
        </p>
    </article>

    <article>
        <h2>Title</h2>
        <p>
            Lorem Ipsum...
        </p>
        <p>
            Lorem Ipsum
        </p>
    </article>
</div>
                

دستور زیر اولین article در تکه کد فوق را انتخاب خواهد کرد.

article:first-of-type {
    background-color: #eee;
    border: 1px solid #ddd;
}
                

دستور زیر اولین پاراگراف ( تگ <p> )را انتتخاب خواهد کرد.

p:first-of-type {
    font-weight: bold;
}
                

دستور زیر اولین لینک را انتخاب کرده و همچنین آدرس مقصد لینک مد نظر را در کنارش چاپ خواهد کرد.

a:first-of-type {
    color: deepPink;
}

a:first-of-type::after {
    content: "(" attr(href) ")";
    color: deepPink;
}
                
دمو (کد های زیر را تغییر داده و نتیجه را مشاده کنید).

See the Pen :first-of-type CSS examples by alishooti (@alishooti) on CodePen.0

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

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

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

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

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