آموزش CSSآموزش طراحی سایت

جلسه ۴۸ – 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 ها به کار می‌رفت.
  • نشانه <: برای انتخاب فرزندان مستقیم یک عنصر خاص (و نه فرزندان داخلی تر) به کار می‌رفت.

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

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

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

 

برچسب ها

نوید معدن نژاد

یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


حداکثر حجم فایل برای آپلود: 1 مگابایت.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر