nth-child در CSS

ساعت : ۱۳:۴۵

تاریخ : ۱۳ بهمن ۱۳۹۷

nth-child در CSS چیست و چگونه از آنها استفاده می شود؟

nth-child در CSS الگوهایی هستند که برای مشخص کردن و انتخاب کردن برخی عناصر در صفحات وب استفاده می شوند. این گزینشگران انواع مختلفی دارند و هر کدام از آنها برای موارد خاصی مورد استفاده قرار می گیرند. گزینشگرهای child بخشی از این گزینشگر ها هستند که برای انتخاب فرزندان یک عنصر html استفاده می شوند. در این مقاله از سری مقاله های آموزش css به معرفی گزینشگرهای child در css می پردازیم و انواع مختلف آنها را بیان می کنیم.

nth-child در CSS

گزینشگرهای child در CSS

گزینشگرهای child مانند سایر گزینشگرهای css برای انتخاب عناصر و استایل دهی آنها کاربرد دارند. این گزینشگر ها برای انتخاب فرزندان یک عنصر در صفحه وب استفاده می شوند. برای مثال با استفاده از این گزینشگران می توانید فرزند اول یا آخر یک عنصر را انتخاب کنید و استایل های مورد نظر خود را به آن بدهید. در ادامه انواع گزینشگرهای child را معرفی می کنیم و نحوه استفاده از هر کدام از آنها را توضیح می دهیم.

گزینشگر first-child در CSS

زمانی که بخواهید تنها عنصری که خودش اولین فرزند یک عنصر دیگر در صفحه است را استایل دهی کنید، می توانید از گزینشگر first-child استفاده کنید. به مثال زیر توجه کنید:( در این مثال اولین عنصر p که در صفحه وجود دارد انتخاب شده و استایل دهی می شود.)


p:first-child {
color : red;
}

nth-child در CSS

گزینشگر last-child در CSS

این گزینشگر برای استایل دهی به عنصری که خودش آخرین فرزند یک عنصر دیگر است، استفاده می شود. مثلا اگر بخواهید به آخرین بخش از یک بخش از سایت استایل خاصی بدهید، می توانید با استفاده از گزینشگر آخرین فرزند را انتخاب کنید تا فقط آن عنصر استایل مورد نظر را بگیرد. به مثال زیر نگاه کنید : (در این مثال تگ پاراگرافی که دومین فرزند پدر خودش است انتخاب می شود و رنگ متن آن قرمز می شود.)


p:nth-child(2){
color:red;
}

گزینشگر nth-child در CSS

زمانی که بخواهید به ترتیب مورد نظر خود یکی از عناصر را برای استایل دهی انتخاب کنید، می توانید از گزینشگر nth-child از گزینشگرهای child استفاده کنید. این گزینشگر یک عدد مثبت را به عنوان آرگومان می گیرد و عنصر مورد نظر شما نیز توسط همین عدد انتخاب می شود. مثال زیر یک مورد استفاده از این گزینشگر را نشان می دهد: ( در این مثال تگ پاراگرافی که دومین فرزند پدر خودش است انتخاب می شود و رنگ متن آن قرمز می شود.)


p:nth-child(2){
color:red;
}

nth-child در CSS

گزینشگر nth-last-child() در CSS

این گزینشگر مانند گزینشگر nth-child() عمل می کند، با این تفاوت که ترتیب انتخاب عناصر از آخرین فرزند است. یعنی اگر به این گزینشگر آرگومان ۱ را بدهید، عنصری که آخرین فرزند پدرش است را انتخاب می کند.

گزینشگر only-child در CSS

این گزینشگر زمانی مورد استفاده قرار می گیرد که می خواهید عنصری را انتخاب کنید که تنها فرزند پدر خود محسوب می شود. به مثال زیر دقت کنید : (در این مثال تگ های پاراگراف در صفحه وب بررسی می شوند تا پاراگرافی که تنها فرزند پدر خودش است، پیدا شود و رنگ آن به رنگ آبی تبدیل شود. در صورت پیدا نشدن چنین عناصری وجود این کد بی تاثیر خواهد بود و رنگ هیچ کدام از تگ های پاراگراف تغییر نخواهد کرد.)


p : only-child {
color : blue;
}

در صورتی که به آموزش css و یا آموزش jquery و یا آموزش bootstrap علاقه دارید میتونید از آموزش های پروژه محور و کاربردی سی اس اس پارک استفاده کنید که ضمانت بازگشت وجه هم داره.



  • nth-child در CSS
    نام نویسنده : امیرمسعود طالاری
  • nth-child در CSS
    نام نویسنده : رضا ابولحسن زاده
  • nth-child در CSS
    نام نویسنده : رضا ابولحسن زاده
  • nth-child در CSS
    نام نویسنده : رضا ابولحسن زاده

درباره نویسنده : برنامه نویس وب و کارشناسی ارشد رشته نرم افزار

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *