جلسه ۵۱ – شبه کلاس های موقعیت محور

شبه کلاس موقعیت محور چیست؟ منظور از شبه کلاس دارای فرزند چیست؟ چگونه فرزندان تگ ها را در CSS مقدار دهی کنیم؟ در این مقاله قصد داریم تا در رابطه با شبه کلاس های موقعیت محور صحبت کنیم.

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

انواع شبه کلاس های موقعیت محور

تو این مقاله، شبه کلاس های مورد نظر رو به دو دسته تقسیم می‌کنیم.

شبه کلاس هایی که بین عناصر هم نوع به کار برده می‌شن:

• first-child
• last-child
• ()nth-child
• ()nth-last-child

و شبه کلاس هایی که بین عناصر غیر هم نوع به کار برده می‌شن:

• ()nth-of-type
• first-of-type
• last-of-type
• only-of-type
• ()nth-last-of-type

حالا مفهوم هم نوع و غیر هم نوع چیه؟ جلو تر متوجه میشیم:

شبه کلاس first-child

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

<div>
   <p>Paragraph1</p>
   <p>Paragraph2</p>
   <p>Paragraph3</p>
   <p>Paragraph4</p>
   <p>Paragraph5</p>
   <p>Paragraph6</p>
</div>

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

برای این منظور، می‌تونیم بنویسیم:

div p:first-child{
   color:green;
}

کد بالا به ما می‌گه: داخل عنصر div برو و اولین عنصر p رو انتخاب کن.

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

شبه کلاس last-child

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

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

<div>
   <p>Paragraph1</p>
   <p>Paragraph2</p>
   <p>Paragraph3</p>
   <p>Paragraph4</p>
   <p>Paragraph5</p>
   <p>Paragraph6</p>
</div>

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

div p:last-child{
   color:yellow;
   background-color: red;
}

نتیجه به صورت زیر خواهد بود:

حالا اگه با عنصر فرزندی، به جز فرزند اول و آخر کار داشته باشیم باید چیکار کنیم؟ به شبه کلاس ()nth-child دقت کنین:

شبه کلاس ()nth-child

این شبه کلاس، می‌تونه کاربرد های متعددی داشته باشه.

تو ساده ترین توضیح برای کاربرد این شبه کلاس، می‌تونیم بگیم که وظیفه‌ی انتخاب عنصر nام رو برعهده داره.

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

<div>
   <p>Paragraph1</p>
   <p>Paragraph2</p>
   <p>Paragraph3</p>
   <p>Paragraph4</p>
   <p>Paragraph5</p>
   <p>Paragraph6</p>
</div>

برای مثال، می‌خوایم عنصر سوم رو آبی کنیم.

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

div p:nth-child(3){
   color:blue;
}

نتیجه به فرم زیر خواهد بود:

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

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

/* ---------- EVEN NUMBERS --------------*/
/* -- first method --*/
div p:nth-child(even){
   color:blue;
}
/*-- second method --*/
div p:nth-child(2n){
   color:blue;
}

/* ---------- ODD NUMBERS --------------*/
/* -- first method --*/
div p:nth-child(odd){
   color:blue;
}
/*-- second method --*/
div p:nth-child(2n+1){
   color:blue;
}

عناصر زوج، شامل پاراگراف دوم، چهارم و ششم می‌شن و عناصر فرد، شامل پاراگراف اول، سوم و پنجم.

برای انتخاب اعداد با مضارب مختلف، برای مثال ۳ و ۴، کافیه بنویسیم:

/* -- مضارب ۴ --*/
div p:nth-child(4n){
   color:blue;
}
/*-- مضارب ۳ --*/
div p:nth-child(3n){
   color:blue;
}

شبه کلاس ()nth-last-child

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

شبه کلاس ()nth-of-type

همونطور که گفته شد، این شبه کلاس ها زمانی به کار می‌رن که عناصر فرزند، از انواع مختلفی تشکیل شدن. کاربرد شبه کلاس ()nth-of-type شبیه به شبه کلاس ()nth-child هست، به کد HTML زیر توجه کنین:

<div>
   <p>Paragraph1</p>
   <span>Span1</span>
   <p>Paragraph2</p>
   <h3>h3 element1</h3>
   <p>Paragraph3</p>
   <h3>h3 element2</h3>
</div>

کد HTML بالا، از عنصر های متفاوتی تشکیل شده و برخلاف مثال های قبل، عنصر های فرزند از یه نوع نیستن.

حالا می‌خوایم عنصر پاراگراف دوم رو به رنگ قرمز دربیاریم. کافیه برای CSS بنویسیم:

div p:nth-of-type(2){
   color: red;
}

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

شبه کلاس های first-of-type و last-of-type

این دو شبه کلاس هم، دقیقا با کاربرد شبه کلاس های first-child و last-child ظاهر می‌شن.

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

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

<div>
   <p>Paragraph1</p>
   <span>Span1</span>
   <p>Paragraph2</p>
   <h3>h3 element1</h3>
   <p>Paragraph3</p>
   <h3>h3 element2</h3>
</div>

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

div h3:first-of-type{
   color: green;
}
div p:last-of-type{
   color:green;
}

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

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

شبه کلاس only-of-type

شاید درک این شبه کلاس، یخورده تو نگاه اول مشکل باشه، اما مفهومش ساده تر از اون چیزیه که فکر می‌کنیم!

وظیفه این شبه کلاس، اینه که عناصری رو انتخاب کنه که هیچ برادر و خواهری از نوع خودشون ندارن و تنهان.

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

<div>
   <p>Paragraph1</p>
   <span>Span1</span>
   <p>Paragraph2</p>
   <h3>h3 element1</h3>
   <p>Paragraph3</p>
   <h3>h3 element2</h3>
</div>

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

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

div :only-of-type{
   color:green;
}

اگه دقت کنیم، میبینیم که برای قسمت دوم کد CSS، که شبه کلاس رو نوشتیم، هیچ انتخاب گری رو به only-of-type تخصیص ندادیم.

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

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

شبه کلاس ()nth-last-of-type

این شبه کلاس، کاملا مشابه شبه کلاس ()nth-of-type عمل می‌کنه، با این تفاوت که عمل شمارش عناصر رو از آخرین عنصر شروع می‌کنه.

پایان ترم

سوال:
به کد 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 با کلاس paragraph3 رو انتخاب کنیم؟

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

نتیجه گیری

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

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

• first-child: انتخاب اولین عنصر فرزند
• last-child: انتخاب آخرین عنصر فرزند
• nth-child: انتخاب nامین عنصر فرزند
• last-nth-child: انتخاب nامین عنصر فرزند از آخر
• nth-of-type: انتخاب nامین فرزند از یک عنصر خاص
• first-of-type: انتخاب اولین فرزند از یک عنصر خاص
• last-of-type: انتخاب آخرین فرزند از یک عنصر خاص
• only-of-type: انتخاب عنصر تنها
• nth-last-of-type: انتخاب nامین فرزند از یک عنصر خاص از آخر

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

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