جلسه ۴۸ – combinator ها

منظور از نشانه های ارتباطی چیست؟ منظور از Combinator ها چیست؟ منظور از Combinator در CSS چیست؟ در این مقاله می‌خواهیم به صورت کامل با کامبینیتور ها یا نشانه های ارتباطی آشنا شویم. تا انتهای این مقاله من رو دنبال کنید.

همونطور که توی مقدمه فصل نشانه های ارتباطی گفته شد، ما می‌تونیم با استفاده از نشانه های ارتباطی، روابط جدیدی رو بین انتخابگر های مختلف خلق کنیم.

تا به حال، انتخابگر های ساده ای رو یاد گرفتیم.

تو این مقاله، بقیه ی این نشانه های ارتباطی رو با هم دیگه یاد می‌گیریم!

انواع نشانه های ارتباطی

نشانه های ارتباطی یا combinators، انواع مختلفی دارن که عبارتند از:

• فاصله ”  “
• <
• ‍‍‍‍‍~
• –

حالا در این مقاله از آموزش طراحی سایت به بررسیشون بپردازیم:

نشانه فاصله

این نشانه رو تو مقاله انتخابگر های گروهی در CSS میزفا با هم برررسی کردیم.

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

<div class="div1">
   <p>پاراگراف اول</p>
   <p>پاراگراف دوم</p>
   <div class="div2">
      <p>پاراگراف سوم</p>
      <p>پاراگراف چهارم</p>
   </div>
   <p>پاراگراف پنجم</p>
</div>

.div1 p{
   color:red;
}

اینجا داریم می‌گیم: برو داخل عنصر با کلاس div1، و تمام پاراگراف های داخلشو “از فرزند گرفته تا نوه ها و نتیجه ها” به رنگ قرمز دربیار.

نتیجه رو به فرم زیر مشاهده می‌کنیم:

منظور از نوه ها و نتیجه ها چی بود؟ تو تیتر بعدی توضیح می‌دیم!

نشانه <

این نشانه، کاربردی کاملا شبیه به نشانه “فاصله” داره. اما با یه تفاوت خیلی بزرگ.

به طور خلاصه، این نشانه، رو فرزندان مستقیم خودش تاثیر می‌زاره و کاری با نوه ها و نتیجه های خودش نداره!

به مثال زیر توجه کنین:

<div class="div1">
   <p>پاراگراف اول</p>
   <p>پاراگراف دوم</p>
   <div class="div2">
      <p>پاراگراف سوم</p>
      <p>پاراگراف چهارم</p>
   </div>
   <p>پاراگراف پنجم</p>
</div>

.div1 > p{
   color:red;
}

این کد میگه: برو داخل عنصر با کلاس div1، و فقط روی پاراگراف هایی تاثیر بزار که فرزند عنصر div1 هستن،‌ نه اون هایی که فرزند فرزند اون یا فرزند فرزند فرزند …. اون هستن!

نتیجه به فرم زیر مشاهده می‌شه:

در اینجا، پاراگراف سوم و چهارم، خودشون فرزند عنصر با کلاس div2 هستن، که به تناسب، خود این عنصر فرزند div1 محسوب می‌شه!

اگه براتون سوالی یا ابهامی پیش اومد، حتما و حتما تو قسمت نظرات بپرسین تا یاریتون کنیم 🙂

نشانه +

این نشانه، به معنای “عنصر بعدی” هست.

مثل نشانه های قبل، کاری به فرزند، نوه و نتیجه نداره و با برادرا و خواهرای خودش کار داره!

برای اینکه بهتر متوجه شیم، به مثال زیر توجه کنین:

<div class="div1">
   <p>پاراگراف اول</p>
   <p>پاراگراف دوم</p>
   <div class="div2">
      <p>پاراگراف سوم</p>
      <p>پاراگراف چهارم</p>
   </div>
   <p>پاراگراف پنجم</p>
</div>

.div2 + p{
color:red;
}

این کد ذکر می‌کنه: عنصر با کلاس div2 رو پیدا کن، و روی اولین عنصر پاراگرافی که بعدش میبینی اثر بزار.

نتیجه به فرم زیر مشاهده می‌شه:

نشانه ~

این نشانه دقیقا مثل نشانه ~، با برادر ها و خواهرهای خودش کار داره و روشون تاثیر می‌زاره.

کاربردش ازین قراره که “برخلاف +، فقط روی تک عنصر بعدی اثر نمی‌زاره و تمامی عناصر بعدی رو در بر می‌گیره”

به مثال زیر توجه کنین:

<div class="div1">
   <p>پاراگراف اول</p>
   <p>پاراگراف دوم</p>
   <div class="div2">
      <p>پاراگراف سوم</p>
      <p>پاراگراف چهارم</p>
   </div>
   <p>پاراگراف پنجم</p>
</div>

p ~ p{
   color:red;
}

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

نتیجه به صورت زیر مشاهده می‌شه:

تو اینجا، ما دو عنصر پدر داریم که پر از عناصر پاراگرافه: div1 و div2

به ترتیب اولین عناصر پاراگراف تو هرکدوم از این ها، پاراگراف اول و پاراگراف سوم هستن.

بنابراین برادران و خواهران (بعدیشون) رو به رنگ قرمز درمیاره.

پشتیبانی مرورگر ها

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

اینترنت اکسپلورر ۷ هم قابلیت پشتیبانی از نشانه هایی ک یاد گرفتیم رو داره، با این تفاوت که وجود کامنت بین کد های HTML عناصر خواهر و برادر، می‌تونه به بروز مشکل تو استفاده از بعضی از نشانه ها بیانجامه.

پایان ترم

سوال آموزش جامع css :

به کد HTML زیر توجه کنین:

<div class="main-menu">

   <div class="menu-item1"></div>

   <div class="menu-item2">
      <div class="menu-sub-item1"></div>
      <div class="menu-sub-item2"></div>
   </div>

   <div class="menu-item3"></div>

   <div class="menu-item4"></div>

   <div class="menu-item5"></div>

</div>

چطور می‌تونیم به تمامی div ها با کلاس menu-item، عرض ۵۰٪ بدیم، بدون اینکه دو div با کلاس menu-sub-item تحت تاثیر قرار بگیرن؟

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

در این مقاله، با یک سری از نشانه های ارتباطی متفاوت آشنا شدیم که به مراتب، کارمون رو در انتخاب عناصر مختلف بسیار بسیار راحت تر می‌کنن.

برای اینکه یه دوره کوتاهی بکنیم:

• نشانه ” “: فاصله برای انتخاب فرزندان درون یک عنصر پدر به کار می‌رفت.
• نشانه +: برای انتخاب عنصر برادر یا sibiling به کار می‌رفت.
• نشانه ‍~: برای انتخاب عناصر برادر یا sibiling ها به کار می‌رفت.
• نشانه <: برای انتخاب فرزندان مستقیم یک عنصر خاص (و نه فرزندان داخلی تر) به کار می‌رفت.

این مقاله هم به اتمام رسید. امیدوارم که بهره و لذت کافی رو از مطالعه ی این مقاله برده باشید. 🙂

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

مدیر محتوا: علی اسمعیلی‌