این آموزش در تاریخ ۱۴۰۰/۱۱/۰۶ آپدیت شده است.
آموزش شبه کلاس First-of-Type در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش شبه کلاس First-of-Type در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
شبه کلاس First-Of-Type در CSS
با استفاده از شبه کلاس ( یا هم انتخابگر ) first-of-type در CSS میتوان برای اولین تگ های فرزند از یک نوع خاص در تگ والد استایل دلخواه تعریف کرد.
فرض میکنیم دستورات زیر رو داریم، دستور زیر داره میگه انتخاب کن تمامی تگ هایی که اولین فرزند از یک نوع خاص هستن و درون تگ DIV قرار دارند :
|
1 2 3 |
div :first-of-type{ background-color:orange; } |
|
1 2 3 4 5 6 7 8 |
<div> <p>سایت آموزشی فری لرن</p> <p>سایت آموزشی فری لرن</p> <h2>سایت آموزشی فری لرن</h2> <h2>سایت آموزشی فری لرن</h2> <b>سایت آموزشی فری لرن</b> <b>سایت آموزشی فری لرن</b> </div> |
حال وقتی میگیم اولین فرزند از یک نوع خاص یعنی مثلا الان در دستورات بالا ۲تا p داریم پس اولیش میشه اولین فرزند از نوع تگ P ، و دوباره ۲تا تگ h2 داریم پس اولیش میشه اولین فرزند از نوع تگ h2 و…
| نسخه | CSS3 |
|---|
Free-Learn
مثال از شبه کلاس First-of-Type در CSS
در ادامه میتوانید یک مثال از این انتخابگر / شبه کلاس را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : انتخاب کن تمامی تگ هایی که اولین فرزند از یک نوع خاص هستن در داخل تگ div
|
1 2 3 4 5 6 7 |
<style> div :first-of-type { background-color:orange; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از انتخابگر / شبه کلاس first-of-type در CSS پشتیبانی میکنند یا خیر.
| نام انتخابگر | Chrome | Firefox | Opera | Safari | Edge |
| first-of-type: | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این انتخابگر / شبه کلاس در CSS بصورت زیر می باشد.
|
1 2 3 |
:first-of-type { دستورات سی اس اس در اینجا } |
Free-Learn
نکات و توضیحات
- این شبه کلاس معادل nth-of-type(1) می باشد ( آموزش شبه کلاس nth-of-type )
Free-Learn
مثال های بیشتر
مثال شماره ۱ : انتخاب کن فقط تگ های P را که اولین فرزند از نوع خاص در تگ والدشون هستن
|
1 2 3 4 5 6 7 |
<style> p:first-of-type { background-color:orange; } </style> |
