مرجع 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: و کاربرد آن بیشتر مطالعه کنید.
مثال ها
فرض کنید تکه کد 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.
پشتیبانی مرورگر
first-child: در کروم ،فایرفاکس ،سافاری ،اپرا +9.5 ،اینترنت اکسپلورر +9 و اندروید وآی او اس ، پشتیبانی می شود.
بیشتر بخوانید
استفاده از این متون آموزشی و کپی برداری از آن ها بلامانع می باشد. توجه شود که ذکر منبع به شدت روحیه دهنده است 😉 .
همچنین منتظر دیدگاه های شما هستیم.