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

جلسه ۰۷ – انتخابگر های گروهی

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

انتخابگر های گروهی

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

فایل HTML:

<div> ... </div>
<p> ... </p>
<h3> ... </h3>

فایل CSS:

 

div{
font-size: 20px;
}

p{
font-size: 20px;
}

h3{
font-size: 20px;
}

 

برای سبک شدن کارمون، کافیه کدها را به وسیله کاما “ , “ به صورت یک گروه نوشت. کاما در اینجا حکم ” و ” رو داشته و ویژگی­ هارو به عناصر ذکر شده نسبت می­ده.

div , h3 , p{
   font-size: 20px;
  }

مفهوم کد­، می­گه: ” عنصر div و h3 و p را بگیر و ویژگی­ هارو به آن­ها نسبت بده “.

انتخابگر های گروهی
انتخابگر های گروهی

انتخاب عناصر فرزند

فرض کنیم کد ما دارای تعدادی عنصر p در داخل عناصر دیگه هست.

<div>
<p> … </p>
<p> … </p>
</div>
<span>
<p> … </p>
<p> … </p>
</span>

حالا می­خوایم عناصر p داخل عنصر span رو انتخاب کنیم. کافیه بنویسیم:

span p{
…
}

مفهوم کد می­گه: ” به داخل span برو، عنصر p را پیدا کن و ویژگی­ ها رو به آن نسبت بده “.

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

مثال های پیشرفته تر

div , .right , #iran{
font-size: 30px;
}

مفهوم کد: عنصر div، عناصر با کلاس right و عناصر با آیدی iran رو پیدا کن و سایز فونت اون­ها رو به 30 پیکسل تغییر بده.

div ul li{
color: red;
}

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

div.first p , div .first p{
background-color: blue;
}

مفهوم کد: عنصر div با کلاس first رو پیدا کن و p داخل اون رو انتخاب کن. همزمان تمام div های دیگه رو پیدا کن، هر عنصری داخل اون ها با کلاس first رو پیدا کن و داخل اون ها p رو پیدا کن. سپس به این 2 عنصر p انتخاب شده، رنگ پس زمینه آبی رو اختصاص بده.

نتیجه گیری

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

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

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

 

برچسب ها

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

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

پاسخی بگذارید

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

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

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

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