بعد از مدت ها بلاخره فرصتی پیش اومد تا مجددا مقاله ای بنویسم. این بار قصد دارم با مقاله ای در خصوص CSS اما خارج از دنیای طراحی و ساخت آیتم های مختلف در خدمت شما باشم.
شاید تا به حال کمتر نام Combinator ها را در CSS شنیده باشید، اما مطمئنا به وفور از برخی از آن ها استفاده کرده اید. در واقع همانطور که از نام Combinator بر می آید، تنها یک ترکیب کننده است، ترکیب کننده ی چند گزینشگر ساده مثل Tag Selector و یا Class Selector که به عنوان تعیین کننده ی ارتباط بین دو آن ها ایفای نقش می کند. به طور کلی Combinator ها به چهار گروه مختلف تقسیم می شوند که در ادامه به بررسی هر کدام خواهیم پرداخت.
Descendant Selector
از این نوع گزینشگر یکی از پر کاربرد ترین نوع گزینشگر هایی است که بدون شک از آن استفاده کرده اید، کد html زیر را در نظر بگیرید:
<ul>
<li>Item 1</li>
<li>
<ol>
<li>Sub-item A</li>
<li>Sub-item B</li>
</ol>
</li>
</ul>
و فرض کنید استایل زیر را به li ها نسبت داده ایم:
ul li
{
background-color: Red;
}
همانطور که واضح است کلیه ی li ها به رنگ قرمز در می آیند. این نوع گزینشگر تمام عناصر مورد نظر را در هر عمقی، صرف نظر از عنصر والد آن ها تحت تاثیر قرار می دهد، به همین دلیل به آن Descendant (نوادگان) گفته می شود. در واقع در اینجا ترکیبی از دو Tag Selector را داریم که حد واسط آن ها کاراکتر Space قرار گرفته است. درسته! Space در اینجا یک Combinator محسوب می شود.
حال فرض کنید بخواهیم تنها li های درون ul را انتخاب کنیم، بدیهی است که با Descendant Selector چنین کاری ممکن نیست، به این منظور لازم است از Child Selector استفاده کنیم.
Child Selector
Child Selector یا گزینشگر فرزندی امکان انتخاب فرزندان یک عنصر را در اختیار قرار می دهد، توجه داشته باشید که عناصر فرزند عناصری هستند که مستقیما داخل یک عنصر قرار دارند یا به عبارتی در عمق اول نسبت به عنصر والد خود قرار دارند. در مثال بالا Item 1 فرزند ul محسوب می شود، در حالی که Sub-item A، descendant عنصر ul به حساب می آید. با این تفاسیر برای انتخاب فرزندان از علامت > به عنوان Combinator استفاده می کنیم:
ul > li
{
background-color: Red;
}
Adjacent Sibling Selector
این نوع selector که شاید کاربردی کمتر از دو نوع قبل داشته باشد، برای انتخاب عنصر sibling (برادر) یک عنصر کاربرد دارد. در واقع sibling به دو عنصری گفته می شود که دارای parent های یکسان باشند و adjacent به معنی عنصری است که دقیقا بعدا از عنصر مورد نظر به عنوان sibling ظاهر می شود. برای درک بهتر مثال زیر را مشاهده بفرمایید:
<h2>Heading</h2>
<p>The selector above matches this paragraph.</p>
<p>The selector above does not match this paragraph.</p>
h2 + p
{
background-color: Red;
}
دو تگ p به عنوان sibling های عنصر h2 شناخته می شوند، اما رنگ قرمز تنها به تگ p اول نسبت داده خواهد شد، به دلیل اینکه مستقیما پس از h2 قرار گرفته و به عبارتی adjacent محسوب می شود.
General Sibling Selector
این selector بر خلاف نوع قبل کلیه ی sibling های قرار گرفته پس از عنصر مورد نظر را تحت پوشش قرار می دهد و به همین دلیل از آن به عنوان General یاد می شود. Combinator مورد استفاده در این گزینشگر علامت ~ می باشد:
h2 ~ p
{
background-color: Red;
}
با توضیحات داده شده در قسمت قبل فکر نمی کنم نیاز به بیان جزئیات بیشتری باشد، تنها نکته ی قابل ذکر این است که 3 selector ای که پیش تر توضیح داده شد از گزینشگر های موجود در CSS 2.1 بودند در حالی که این گزینشگر در نسخه ی سوم به CSS اضافه شد.
موفق باشید - عماد فیض