سلکتور ها در CSS – بخش چهارم، ترکیب کننده ها و لیست های انتخاب کننده
در بخش نهایی مقاله ی سلکتور ها در CSS، ترکیبات و گروه های انتخابگر ها را بررسی می کنیم. این ترکیب کننده ها و گروه های انتخابگر ها، دو راه برای ترکیب چند انتخابگر با یکدیگر هستند که به منظور فراهم کردن قابلیت های مفید دیگر برای انتخاب کردن، ارائه شده اند.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
ترکیب کننده ها و لیست های انتخاب کننده در CSS
استفاده از یک انتخاب گر ممکن است در یک سری از شرایط، مفید باشد، اما در برخی موارد ممکن است ناکار آمد و در حقیقت، نا کافی باشد. هنگامی که شما برای انجام انتخاب های سفارشی تر، شروع به ترکیب انتخاب گر های CSS می کنید، انتخابگر ها مفیدتر می شوند. CSS دارای چندین روش برای انتخاب عناصر بر اساس نحوه ی ارتباط آن ها با یکدیگر است. این روابط که به عنوان ترکیب کننده ها بیان می شوند، در ادامه آورده شده اند: (A و B نشانگر انتخابگرهای دیده شده در بالا هستند):
مثالی از یک ترکیب کننده ی CSS
بیایید با هم به نمونه ای از همه ی این موارد نگاهی کنیم:
آموزش پیشنهادی برای شما : آموزش کامل CSS و CSS3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<table lang="en-US" class="with-currency"> <thead> <tr> <th scope="col">Product</th> <th scope="col">Qty</th> <th scope="col">Price</th> </tr> </thead> <tfoot> <tr> <th colspan="2" scope="row">Total:</th> <td>148.55</td> </tr> </tfoot> <tbody> <tr> <td>Lawnchair</td> <td>1</td> <td>137.00</td> </tr> <tr> <td>Marshmallow rice bar</td> <td>2</td> <td>1.10</td> </tr> <tr> <td>Book</td> <td>1</td> <td>10.45</td> </tr> </tbody> </table> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
/* Basic table setup */ table { font: 1em sans-serif; border-collapse: collapse; border-spacing: 0; } /* All <td>s within a <table> and all <th>s within a <table> Comma is not a combinator, it just allows you to target several selectors with the same CSS ruleset */ table td, table th { border: 1px solid black; padding: 0.5em 0.5em 0.4em; } /* All <th>s within <thead>s that are within <table>s */ table thead th { color: white; background: black; } /* All <td>s preceded by another <td>, within a <tbody>, within a <table> */ table tbody td + td { text-align: center; } /* All <td>s that are a last child, within a <tbody>, within a <table> */ table tbody td:last-child { text-align: right; } /* All <th>s, within a <tfoot>s, within a <table> */ table tfoot th { text-align: right; border-top-width: 5px; border-left: none; border-bottom: none; } /* All <td>s preceded by a <th>, within a <table> */ table th + td { text-align: right; border-top-width: 5px; color: white; background: black; } /* All pseudo-elements "before" <td>s that are a last child, appearing within elements with a class of "with-currency" that also have an attribute "lang" with the value "en-US" */ .with-currency[lang="en-US"] td:last-child::before { content: '$'; } /* All pseudo-elements "after" <td>s that are a last child, appearing within elements with the class "with-currency" that also have an attribute "lang" with the value "fr" */ .with-currency[lang="fr"] td:last-child::after { content: ' €'; } |
یادگیری فعال: نوشتن یک ترکیب کننده ی دلخواه در CSS
مثال بالا برای نشان دادن پیچیدگی هایی که می توانید با ترکیب کننده های CSS به دست آورید، طراحی شده است. این یادگیری فعال، شما را به نوشتن یک انتخاب گر ساده تر که شامل ترکیب کننده های CSS باشد، دعوت می کند. در این تمرین، باید یک انتخاب گر CSS را به قوانین ۲-۴، اضافه کنید تا:
- لینک ها را استایل کند، اما فقط لینک هایی که در داخل لیست نامرتب هستند.
- لینک های داخل لیست نامرتب را استایل کند، اما تنها زمانی که شناور شده است.
- فقط پاراگرافی را که به طور مستقیم بعد از عنوان سطح بالا می آید، استایل کند.
اگر اشتباه کردید، همیشه می توانید با استفاده از دکمه ی بازنشانی، آن را مجدد تنظیم کنید. اگر واقعا موفق به انجام این تمرین نشدید، دکمه نمایش راه حل را فشار دهید تا پاسخ تمرین را ببینید.
گروه های انتخاب کننده در یک دستور CSS
شما تا کنون، چندین نمونه از این حالت را در عمل دیده اید، اما اجازه دهید برای روشن شدن، آن را دوره کنیم. شما می توانید گروه های انتخابگر ها را به صورتی که با کاما جدا شوند بنویسید تا یک دستور یکسان را به چند مجموعه از عناصر انتخاب شده، به طور همزمان اعمال کنید. برای مثال:
|
1 |
p, li { font-size: 1.6em;} |
یا این کد:
|
1 |
h1, h2, h3, h4, h5, h6 { font-family: helvetica, 'sans serif';} |
نکته ی مهم: اگر یک انتخاب گر CSS توسط مرورگر پشتیبانی نشود، تمام لیست انتخاب گر های CSS نادیده گرفته می شود. با این حال، :is() pseudo-class در این محدودیت قرار نمی گیرد، اما هنوز هم در زمان نوشتن، به طور گسترده پشتیبانی نمی شود.
در این جا، به پایان آموزش انتخابگر های CSS می رسیم. حتی بیشترِ توسعه دهندگان حرفه ای هم با استفاده از انتخابگر های CSS شگفت زده می شوند. با این حال، اگر احساس می کنید نمی توانید همه ی گزینه ها را به یاد داشته باشید، صفحه اصلی مقاله ی انتخابگر های CSS را بوک مارک کنید و زمانی که لازم است به آن مراجعه کنید.
