وب

سلکتور ها در CSS-بخش چهارم

سلکتور ها در CSS – بخش چهارم، ترکیب کننده ها و لیست های انتخاب کننده

در بخش نهایی مقاله ی سلکتور ها در CSS، ترکیبات و گروه های انتخابگر ها را بررسی می کنیم. این ترکیب کننده ها و گروه های انتخابگر ها، دو راه برای ترکیب چند انتخابگر با یکدیگر هستند که به منظور فراهم کردن قابلیت های مفید دیگر برای انتخاب کردن، ارائه شده اند.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

ترکیب کننده ها و لیست های انتخاب کننده در CSS

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

سلکتور ها در CSS

مثالی از یک ترکیب کننده ی CSS

بیایید با هم به نمونه ای از همه ی این موارد نگاهی کنیم:

آموزش پیشنهادی برای شما : آموزش کامل CSS و CSS3

در این جا، اجازه دهید از style sheet زیر استفاده کنیم:
و نتیجه ی جالب زیر برای ما ایجاد می شود:

سلکتور ها در CSS

یادگیری فعال: نوشتن یک ترکیب کننده ی دلخواه در CSS

مثال بالا برای نشان دادن پیچیدگی هایی که می توانید با ترکیب کننده های CSS به دست آورید، طراحی شده است. این یادگیری فعال، شما را به نوشتن یک انتخاب گر ساده تر که شامل ترکیب کننده های CSS باشد، دعوت می کند. در این تمرین، باید یک انتخاب گر CSS را به قوانین ۲-۴، اضافه کنید تا:

  1. لینک ها را استایل کند، اما فقط لینک هایی که در داخل لیست نامرتب هستند.
  2. لینک های داخل لیست نامرتب را استایل کند، اما تنها زمانی که شناور شده است.
  3. فقط پاراگرافی را که به طور مستقیم بعد از عنوان سطح بالا می آید، استایل کند.

اگر اشتباه کردید، همیشه می توانید با استفاده از دکمه ی بازنشانی، آن را مجدد تنظیم کنید. اگر واقعا موفق به انجام این تمرین نشدید، دکمه نمایش راه حل را فشار دهید تا پاسخ تمرین را ببینید.

گروه های انتخاب کننده در یک دستور CSS

شما تا کنون، چندین نمونه از این حالت را در عمل دیده اید، اما اجازه دهید برای روشن شدن، آن را دوره کنیم. شما می توانید گروه های انتخابگر ها را به صورتی که با کاما جدا شوند بنویسید تا یک دستور یکسان را به چند مجموعه از عناصر انتخاب شده، به طور همزمان اعمال کنید. برای مثال:

یا این کد:

نکته ی مهم: اگر یک انتخاب گر CSS توسط مرورگر پشتیبانی نشود، تمام لیست انتخاب گر های CSS نادیده گرفته می شود. با این حال، :is()  pseudo-class در این محدودیت قرار نمی گیرد، اما هنوز هم در زمان نوشتن، به طور گسترده پشتیبانی نمی شود.

در این جا، به پایان آموزش انتخابگر های CSS می رسیم. حتی بیشترِ توسعه دهندگان حرفه ای هم با استفاده از انتخابگر های CSS شگفت زده می شوند. با این حال، اگر احساس می کنید نمی توانید همه ی گزینه ها را به یاد داشته باشید، صفحه اصلی مقاله ی انتخابگر های CSS را بوک مارک کنید و زمانی که لازم است به آن مراجعه کنید.

نوشته های مشابه

دیدگاهتان را بنویسید

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

همچنین ببینید
بستن
دکمه بازگشت به بالا