ترکیب گرهای CSS

مقدمه

درس پایانی این فصل به موضوع ترکیب‌گرها (combinators) اختصاص دارد که با ترکیب انتخابگرهای CSS با یکدیگر، انتخابگرهای جدیدی را خلق می‌کنند. ترکیب‌گرهای CSS را انتخابگرهای رابطه‌ای (relational selectors) نیز می‌نامند؛چون عناصر را بر اساس رابطه‌ای که با هم دارند، انتخاب می‌کنند. در CSS چهار نوع ترکیب‌گر داریم که در این درس آنها را معرفی و بررسی می‌کنیم.

انواع ترکیب‌گرها در CSS

همانطور که در مقدمه‌ هم ذکر شد، ترکیب‌گرهای CSS را انتخابگرهای رابطه‌ای (relational selectors) نیز می‌نامند: چون عناصر را بر اساس رابطه‌ای که با هم دارند، انتخاب می‌کنند. رابطه‌ی عناصر با یکدیگر از روی درخت سلسله‌مراتبی HTML یعنی DOM تعیین می‌شود. برای مثال، رابطه‌ی عناصر html و body در هر سند استاندارد HTML، یک رابطه‌ی والد و فرزندی است. به بیان دقیق‌تر، عنصر body یک فرزند مستقیم عنصر html است. اما هر عنصر فرزند body یک فرزند غیر مستقیم عنصر html است. رابطهء‌ی دیگری که می‌تواند بین عناصر وجود داشته باشد، رابطه‌ی خواهر و برادری یا sibling است. مثلاً عناصر head و body چنین رابطه‌ای با هم دارند، چون والد مشترکی (عنصر html) دارند.

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

نام ترکیب‌گر	الگوی کلی	توضیح
descendent	A B	هر عنصر B که یک فرزند مستقیم یا غیر مستقیم یک عنصر A است، انتخاب می‌شود.
direct child	A > B	هر عنصر B که یک فرزند مستقیم یک عنصر A است، انتخاب می‌شود.
adjacent sibling	A + B	هر عنصر B که بلافاصله بعد از یک عنصر A قرار داشته باشد، انتخاب می‌شود؛ البته به شرطی که A و B والد یکسانی داشته باشند.
general sibling	A ~ B	هر عنصر B که بعد از یک عنصر A قرار داشته باشد، انتخاب می‌شود؛ البته به شرطی که A و B والد یکسانی داشته باشند.

قبل از اینکه به بررسی دقیق‌تر هر یک از این ترکیب‌گرها بپردازیم، نگاهی به تصویر زیر بیندازید که در قالب چند مثال ساده، همه چیز را در مورد ترکیب‌گرها نشان می‌دهد.

ترکیب‌گر Descendant

انتخابگر Descendent دارای فرم کلی زیر است:

A B{
  // styles
}

واژه‌ی descendant به معنای نسل و اولاد است. یک انتخابگر به فرم بالا به این معناست که چنانچه در صفحه عنصری از نوع B وجود دارد که یک فرزند مستقیم یا غیرمستقیم عنصری از نوع A است، انتخاب شود. در تصویر بالا، به انتخابگر article p نگاه کنید که باعث شده هر عنصر p که فرزند یک عنصر article است، انتخاب شود.

البته A و B لزوماً انتخابگرهای نوع (مانند article و p) نیستند و می‌توانند هر نوع انتخابگری باشند. مثال زیر را ببینید:

.demo div.test{
  // styles
}

انتخابگر بالا به این معناست که: هر عنصر div که دارای کلاس test است و فرزند عنصری با کلاس demo است، انتخاب شود.

ترکیب‌گر Direct Child

انتخابگر Direct Child داری فرم کلی زیر است:

A>B{
  // styles
}

عبارت direct child یعنی فرزند مستقیم. یک انتخابگر به فرم بالا به این معناست که چنانچه در صفحه عنصری از نوع B وجود دارد که یک فرزند مستقیم عنصری از نوع A است، انتخاب شود. در تصویر بالا، به انتخابگر article > p نگاه کنید که باعث شده هر عنصر p که فرزند مستقیم یک عنصر article است، انتخاب شود.

البته A و B لزوماً انتخابگرهای نوع (مانند article و p) نیستند و می‌توانند هر نوع انتخابگری باشند. مثال زیر را ببینید:

.demo>div.test{
  // styles
}

انتخابگر بالا به این معناست که: هر عنصر div که دارای کلاس test است و فرزند مستقیم عنصری با کلاس demo است، انتخاب شود.

ترکیب‌گر Adjacent Sibling

انتخابگر Adjacent Sibling دارای فرم کلی زیر است:

A+B{
  // styles
}

عبارت adjacent sibling یعنی فرزندان پشت سر هم یا مجاور. یک انتخابگر به فرم بالا به این معناست که از بین عناصری که والد مشترکی دارند (عناصر sibling)، چنانچه عنصری از نوع B وجود داشته باشد که بلافاصله بعد از عنصری از نوع A قرار داشته باشد، انتخاب شود. در تصویر بالا به انتخابگر h1+p نگاه کنید که باعث شده هر عنصر p که والد مشترکی با h1 دارد و بلافاصله بعد از آن آمده، انتخاب شود.

مشابه آنچه در مورد دو ترکیب‌گر قبل گفتیم، لزومی ندارد که A و B انتخابگرهای نوع باشند و می‌توانند هر نوع انتخابگری باشند. مثال زیر را ببینید:

.demo+div.test{
  // styles
}

انتخابگر بالا به این معناست که: هر عنصر div که دارای کلاس test است و بلافاصله بعد از یک عنصر siblimg یا هم‌والد با کلاس demo آمده، انتخاب شود.

ترکیب‌گر General Sibling

انتخابگر General Sibling دارای فرم کلی زیر است:

A~B{
  // styles
}

عبارت general sibling به معنای رابطه‌ی خواهر و برادری یا همان داشتن والد مشترک است و نسبت به adjacent sibling قید مجاورت یا پشت سر هم بودن را ندارد. یک انتخابگر به فرم بالا به این معناست که از بین عناصری که والد مشترکی دارند (عناصر sibling)، چنانچه عنصری از نوع B وجود داشته باشد که بعد از عنصری از نوع A قرار داشته باشد، انتخاب شود. در تصویر بالا به انتخابگر h1~p نگاه کنید که باعث شده هر عنصر p که والد مشترکی با h1 دارد و بعد از آن آمده، انتخاب شود.

مشابه آنچه در مورد سه ترکیب‌گر قبل گفتیم، لزومی ندارد که A و B انتخابگرهای نوع باشند و می‌توانند هر نوع انتخابگری باشند. مثال زیر را ببینید:

.demo~div.test{
  //styles
}

انتخابگر بالا به این معناست که: هر عنصر div که دارای کلاس test است و بعد از یک عنصر sibling یا هم‌والد با کلاس demo آمده، انتخاب شود.

ترکیب انتخابگرها بدون استفاده از ترکیب‌گرها

در درس مربوط به انتخابگرهای ساده دیدیم که می‌توان با زنجیر کردن انتخابگرها به یکدیگر، به انتخابگرهای خاص‌تری رسید. برای مثال، دیدیم که انتخابگر .class1.class2 باعث می‌شود که هر عنصری که هم دارای کلاس class1 و هم دارای کلاس class2 است، انتخاب شود.

این روشِ ترکیب‌کردن انتخابگرها، مختص انتخابگرهای ساده نیست و برای انواع انتخابگرها قابل استفاده است. به عنوان مثال:

انتخابگر a.nav-link[href*=”example.com”] به این معناست که هر عنصر از نوع a که دارای کلاس nav-link است و مقدار صفت href آن شامل عبارت example.com باشد، انتخاب شود.
اتخابگر li.class-one.class-two:first-child به این معناست که هر عنصر از نوع li که دارای کلاس‌های class-one و class-two است و در وضعیت first-child قرار دارد (یعنی اولین فرزند عنصر والد خود است) انتخاب شود.