جلسه ۵۲ – شبه کلاس های ارتباطی

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

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

انواع شبه کلاس های ارتباطی

شبه کلاس های ارتباطی، به شبه کلاس های زیر تقسیم می‌شن:

• ()not
• empty
• target

شبه کلاس ()not

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

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

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

<div>
   <p class="paraph1">Paragraph1</p>
   <p class="paraph2">Paragraph2</p>
   <p class="paraph3">Paragraph3</p>
   <p class="paraph4">Paragraph4</p>
   <p class="paraph5">Paragraph5</p>
</div>

حالا می‌خوایم کاری کنیم، که تمام پاراگراف ها به جز پاراگراف اول (که کلاس paraph1 رو داره) به رنگ قرمز دربیان.

کافیه بنویسیم:

div p:not(.paraph1){
   color:red;
}

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

نکته: این شبه کلاس، اهمیتی به اینکه عناصر فرزند از یک نوع هستن یا از انواع مختلف نمیده، درواقع مثل شبه کلاس های موقعیت محور نیست! بنابراین می‌تونیم زمانی که عناصر فرزند ما از انواع مختلفی هم هستن، از شبه کلاس ()not استفاده کنیم.

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

<div>
   <p>Paragraph1</p>
   <span>Span1</span>
   <p>Paragraph2</p>
   <code>Code1</code>
   <p>Paragraph3</p>
   <code>Code2</code>
</div>

حالا می‌خوایم کاری کنیم که تمام محتوای صفحه، به جز عناصر code، به رنگ آبی دربیان. برای CSS می‌نویسیم:

div :not(code){
   color:blue;
}

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

شبه کلاس target

شبه کلاس target، مربوط به تگ هایی می‌شه که دارای صفت href هستن. برای درک این شبه کلاس، اول یه مرور کوچیکی از مفهوم target در HTML داشته باشیم.

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

<a href="#myDiv">Go to the div</a>
<div id="myDiv">Hello world</div>

فرض کنیم عنصر div (که آیدی myDiv رو داره)، در راستای ارتفاع، فاصله زیادی رو تا عنصر a داره.

توسط ساختار بالا و قرار دادن آیدی عنصر مورد نظر در صفت تگ a، می‌تونیم فقط با کلیک کردن روی لینک  Go to the div، مستقیما به عنصر div مورد نظرمون بریم.

تو اینجا می‌گفتیم که عنصر div، یک target یا هدف برای عنصر a به حساب میاد.

حالا شبه کلاس target به چه معناست؟

شبه کلاس target، برای زمانی کاربرد داره که می‌خوایم بعد از کلیک روی لینک، استایل هدف مورد نظرمون تغییر کنه.

به ساختار HTML زیر توجه کنین:

<a href="#myDiv1">Go to the div1</a>
<div id="myDiv1">Div1</div>
<a href="#myDiv2">Go to the div2</a>
<div id="myDiv2">Div2</div>

می‌خوایم با کلیک روی هر کدوم از لینک ها، کاری کنیم که یه استایل خاص به div تحت نظرشون منتقل بشه. می‌نویسیم:

div:target{
   background-color: green;
   color:white;
}

نتیجه کد به شکل زیر خواهد بود:

div اول، بعد از کلیک بر روی لینک اول، استایل مورد نظر رو به خودش گرفته. می‌تونین لینک دوم رو هم امتحان کنین 🙂

اگه جایی از مطالب رو متوجه نشدین، حتما تو قسمت نظرات بیان کنین تا رسیدگی کنیم.

شبه کلاس empty

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

برای مثال، ساختار HTML و CSS زیر رو مشاهده کنین:

<div>
<p>Paragraph1</p>
<span>Span1</span>
<p></p>
<code>Code1</code>
<p></p>
<code>Code2</code>
</div>

div :empty{
   width:50px;
   height: 50px;
   background-color: green;
}

نتیجه کد، به شکل زیر خواهد بود:

شبه کلاس root

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

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

<div>
<p>Paragraph1</p>
<span>Span1</span>
<p>Paragraph2</p>
<code>Code1</code>
<p>Paragraph3</p>
<code>Code2</code>
</div>

:root{
   background-color: green;
}

توسط کد CSS فوق، تمامی صفحه به رنگ سبز درخواهد اومد.

پایان ترم

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

<div id="parent">

   <h1>The Title</h1>

   <p class="paragraph1">
      This is content 1
   </p>

   <h2>The Subtitle</h2>

   <p class="paragraph2">
      This is content 2
   </p>

   <p class="paragraph3">
       This is content 3
   </p>

   <p class="paragraph4">
      This is content 4
   </p>

</div>

توسط چه کدی، می‌تونیم به تمامی عناصر p، به جز عنصر p با کلاس paragraph4 رنگ قرمز اختصاص بدیم؟

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

نتیجه گیری

در این مقاله، شبه کلاس های ارتباطی رو با هم بررسی کردیم. این شبه کلاس ها عبارت بودند از:

• ()not: نقش “به جز” رو در انتخابگر ها ایفا می‌کرد.
• target: به عنصر تحت target استایل مورد نظر رو اختصاص می‌داد.
• empty: عناصری رو انتخاب می‌کرد که محتوایی در خودشون نداشتن.

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

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