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

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

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

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

فایل 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>
<table>
<p> … </p>
<p> … </p>
</table>

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

table p{
…
}

مفهوم کد می­گه: ” به داخل table برو، عنصر 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 ما با انتخابگر‌های مختلف و تفاوت‌های آن‌ها آشنا شدیم. امیدواریم از این مقاله استفاده لازم را برده باشید.

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

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