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

طراحی سایت

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

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

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

سرفصل‌های پست

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

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

فایل 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 ما با انتخابگر‌های مختلف و تفاوت‌های آن‌ها آشنا شدیم. امیدواریم از این مقاله استفاده لازم را برده باشید.

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

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

7
27 مهر 1398
..نظرات..
..مقالات پربازدید..
طراحی سایت

آموزش قرعه کشی در اینستاگرام

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

6368
24 فروردین 1398
برنامه نویسی

ویژگی های جدید لاراول 5.8

تغییرات لاراول 5.8 LARAVEL ورژن بعدی فریم ورک لاراول با نسخه ۵.۸ در ماه فوریه سال ۲۰۱۹ منتشر میشه. در حال حاظر تنها مواردی که قطعی شده پشتیبانی لاراول ۵.۸ از کتابخانه carbon نسخه ۲ می باشد. و قابلیت امکان سوییچ بین هر دو نسخه یک و دو carbon مورد دیگر استفاده laravel 5.8 از vlucas/phpdotenv ورژن 3 برای فایل .env میباشد که اجازه استف...

608
08 اسفند 1397
برنامه نویسی

آموزش کار با افزونه دکان (چند فروشندگی)

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

537
04 دی 1397