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

شبه کلاس های مربوط به فرزندان تگ ها

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

شبه کلاس موقعیت محور چیست؟ منظور از شبه کلاس دارای فرزند چیست؟ چگونه فرزندان تگ ها را در 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 رو انتخاب کن.

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

استفاده از first-child

شبه کلاس 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;
}

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

استفاده از last-child

حالا اگه با عنصر فرزندی، به جز فرزند اول و آخر کار داشته باشیم باید چیکار کنیم؟ به شبه کلاس ()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;
}

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

استفاده از ()nth-child

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

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

/* ---------- 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;
}

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

استفاده از ()nth-of-type

شبه کلاس های 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;
}

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

استفاده از last-of-type و first-of-type

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

شبه کلاس 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 تمام عناصر فرزند رو در نظر می‌گیره و با توجه به شبه کلاس مذکور، دنبال عنصری می‌گرده که تنهاست و فقط یک بار نوشته شده.

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

استفاده از only-of-type

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

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

پایان ترم

[box type=”info” class=”question-from-users” width=””]

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

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

[/box]

نتیجه گیری

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

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

  • 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امین فرزند از یک عنصر خاص از آخر

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

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

فیلم آموزشی asp.net core 2

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

فیلم آموزشی asp.net core 2

10 نظر

10 پاسخ

  1. سلام
    من دانش اموز هستم میخوام برم کلاس ۱۱ و رشتم هم طراحی وب سایته میخواستم بدونم ک از جلسه یک تا اینجا رو خوندم ولی یک بار فقط خوندم و بعضی از جلسه ها رو یادم میره خواستم بدونم بعدت با تکرار و تمرین میشه همه رو حفظ کنم

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

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

  2. سلام.به نظرم پاسخ فرستاده شده اشتباهه. چون nth-child(2n+1) برای انتخاب عناصر فرد در بین عناصر همنوع بکار میره.فکر کنم پاسخ درست این باشه:
    div p:nth-of-type(3){ color:red;}

    1. سلام نرگس. فکر نکن، مطمئن باش که پاسخت درسته 🙂 . فقط در مورد پاسخ مهدی، دلیل درست بودنش اینه که کدش تو این مثال کار می‌کنه، نکتش اینه کد 2n+1 از عنصر سوم شروع به شمردن می‌کنه و عنصر اول رو شامل نمیشه، و تنها عنصر فرد در اون مجموعه به جز ۱، عنصر ۳ هست.

  3. سلام. یه سوال برای من پیش اومد. فرق only-of-type با only-child چی هست؟

    1. سلام گلی. سوال خوبی پرسیدی. ببین only-child رو عناصری تاثبر داره که هیچ برادر و خواهری ندارن. مثلا اگه یه div، هیچ پاراگراف یا عنصر دیگه ای پیشش نباشه only-child روش اثر داره. اما only-of-type رو عناصری تاثیر داره که هیچ خواهر و برادری “از نوع خودشون” ندارن. من این مثال رو برات اماده کردم که بهتر برات جا بیفته. بررسیش کن و اگه سوالی باز پیش اومد بپرس.

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

نشانی ایمیل شما منتشر نخواهد شد.

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

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=