آموزش CSS مبتدی : ترکیبکنندهها
آخرین انتخابگرهایی که بررسی خواهیم کرد، ترکیبکنندهها (combinator) نامیده میشوند. ترکیبکنندهها برای ترکیب سایر انتخابگرها به گونهای استفاده میشوند که به ما امکان میدهند عناصر را بر اساس موقعیت آنها در DOM نسبت به سایر عناصر (مثلاً فرزند یا خواهر و برادر) انتخاب کنیم.
ترکیبکنندهی نسل - که با یک کاراکتر فاصله ( ) نمایش داده میشود - دو انتخابگر را به گونهای ترکیب میکند که عناصر منطبق با انتخابگر دوم در صورتی انتخاب میشوند که دارای یک عنصر جد (والد، والدِ والد، یا والدِ والدِ والد و غیره) منطبق با انتخابگر اول باشند. انتخابگرهایی که از یک ترکیبکنندهی نسل استفاده میکنند، انتخابگرهای نسل نامیده میشوند.
در مثال زیر، ما فقط عنصر را که درون عنصری با کلاس قرار دارد، تطبیق میدهیم.
ترکیبکننده فرزند (>) بین دو انتخابگر CSS قرار میگیرد. این ترکیبکننده فقط با عناصری مطابقت دارد که با انتخابگر دوم مطابقت دارند و فرزندان مستقیم عناصری هستند که با انتخابگر اول مطابقت دارند. عناصر نسل پایینتر در سلسله مراتب با هم مطابقت ندارند. به عنوان مثال، برای انتخاب فقط عناصر که فرزندان مستقیم عناصر هستند:
در مثال بعدی، یک لیست مرتب (
) داریم که درون یک لیست نامرتب () قرار گرفته است. ترکیبکنندهی فرزند فقط آن دسته از عناصر را انتخاب میکند که فرزندان مستقیم یک هستند و آنها را با یک حاشیهی بالا استایلبندی میکند.
در مثال قبلی، سعی کنید علامت > که انتخابگر را به عنوان انتخابگر فرزند مشخص میکند، حذف کنید. در نهایت یک انتخابگر از نسل آن باقی میماند و تمام عناصر حاشیه قرمز میگیرند.
ترکیبکنندهی sibling بعدی مستقیم
ترکیبکنندهی همخانوادهی بعدی (+) بین دو انتخابگر CSS قرار میگیرد. این ترکیبکننده فقط با عناصری مطابقت دارد که با انتخابگر دوم مطابقت دارند و درست بعد از عنصری که با انتخابگر اول مطابقت دارد، قرار میگیرند. برای مثال، برای انتخاب تمام عناصر که بلافاصله قبل از یک عنصر قرار دارند:
یک مورد استفاده رایج، انجام کاری با پاراگرافی است که پس از یک عنوان قرار میگیرد، مانند مثال زیر. در اینجا، هر پاراگرافی را که یک عنصر والد با دارد و بلافاصله پس از آن قرار میگیرد، انتخاب میکنیم.
ترکیبکنندهی sibling بعدی غیرمستقیم
اگر میخواهید همخانوادهای یک عنصر را انتخاب کنید، حتی اگر مستقیماً مجاور هم نباشند، میتوانید از ترکیبکنندهی همنیاهای بعدی (~) استفاده کنید. برای انتخاب تمام عناصر که هر جایی بعد از عناصر قرار میگیرند، این کار را انجام میدهیم:
در مثال زیر، ما تمام عناصر که بعد از میآیند را انتخاب میکنیم، و حتی با اینکه یک هم در سند وجود دارد، که بعد از آن میآید انتخاب میشود.
ترکیب ترکیبکنندهها با انتخابکنندهها
شما میتوانید هر یک از انتخابگرهایی که در درسهای قبلی کشف کردیم را با ترکیبکنندهها ترکیب کنید تا بخشی از سند خود را انتخاب کنید. برای مثال، برای انتخاب موارد لیست با کلاس a که فرزندان مستقیم یک هستند، موارد زیر را امتحان کنید:
با این حال، هنگام ایجاد لیستهای بزرگی از انتخابگرها که بخشهای بسیار خاصی از سند شما را انتخاب میکنند، مراقب باشید. استفاده مجدد از قوانین CSS دشوار خواهد بود زیرا انتخابگر را به موقعیت آن عنصر در نشانهگذاری بسیار خاص کردهاید.
اغلب بهتر است یک کلاس ساده ایجاد کنید و آن را روی عنصر مورد نظر اعمال کنید. با این اوصاف، اگر نیاز به استایلدهی به چیزی در سند خود دارید و نمیتوانید به
HTML دسترسی داشته باشید، شاید به این دلیل که توسط یک CMS تولید میشود، دانش شما در مورد ترکیبکنندهها بسیار مفید خواهد بود.
