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

طراحی سایت

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

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

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

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

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

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

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

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

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

64
27 مهر 1398
    ..نظرات..
    ..مقالات پربازدید..
    آموزش قرعه کشی در اینستاگرام
    طراحی سایت

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

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

    14285
    24 فروردین 1398
    دلایل موفقیت دیجی کالا
    طراحی سایت

    دلایل موفقیت دیجی کالا

    یکی از موفق ترین استارت اپ های ایران در دهه ی اخیر سایت دیجی کالا بوده است . به طوری که به جرئت می توان گفت این سایت بزرگ‌ ترین خرده‌ فروشی اینترنتی خاورمیانه است .اقایان محمدی در سال 1384 تصمیم راه اندازی این وب سایت گرفتند و در سال 85 این برند با نام فعلی ” دیجی کالا ” پایه گذاری گردید .مدیران این پروژه با این هدف او...

    2094
    22 اردیبهشت 1398
    bit.ly چیست ؟
    طراحی سایت

    bit.ly چیست ؟

    بیتلی یا bitly یکی از شناخته‌شده‌ترین سرویس‌های کوتاه کننده لینک است. این سایت با نشانی https://bit.ly در سال ۲۰۰۸ تاسیس شد. یک کوتاه کننده‌ی لینک وظیفه دارد تا لینک‌های مورد نظر کاربران را به شکل کوتاه و قابل خواندن و نوشتن تبدیل کند. این سرویس در هر ماه حدود ۶۰۰ میلیون لینک کاربران را کوتاه می‌کند.علت استفاده از...

    2055
    27 آذر 1398