آموزش انتخابگرها یا Selectors در CSS بخش دوم

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

آموزش انتخابگرها یا Selectors در CSS بخش دوم

Free-Learn

انتخابگرها یا Selectors در CSS بخش دوم

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

بخش اول آموزش انتخابگرها یا Selectors در CSS را مشاهده نمایید.

حال در این جلسه میخوایم با ۲ نوع دیگه از انتخابگرها آشنا شویم :

  • انتخابگر صفت
  • انتخابگر ترکیبی

Free-Learn

انتخابگر صفت

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

انواع انتخابگرهای صفت

  • انتخاب کن صفاتی که حاوی حداقل یک کلمه مورد نظر من باشد
  • انتخاب کن صفاتی که از یک کلمه خاص شروع می شوند
  • انتخاب کن صفاتی که از یک کلمه خاص شروع می شوند (مهم نیست کلمه چسبیده باشه یا نه)
  • انتخاب کن صفاتی که با کلمه خاصی به پایان می رسند
  • انتخاب کن صفاتی که حاوی کلمه مورد نظر ما باشد

Free-Learn

برای مثال من میخوام درون یک صفحه لینک هایی که به سایت فری لرن ایجاد شده رو رنگ زمینه شون رو زرد کنم.

پس به اینصورت عمل میکنیم :

امتحان کنید

مثال شماره ۲ : انتخاب صفت class از تگ P

امتحان کنید

مثال شماره ۳ : انتخاب صفت type از تگ Input

امتحان کنید

Free-Learn

انتخابگر صفاتی که حاوی حداقل یک کلمه مورد نظر من باشد

در این روش مثلا من میگم انتخاب کن تمامی تصاویری رو که در صفت title شون کلمه free وجود داشت، اینم میره و تمامی تگ های img رو پیدا میکنه و نگا به صفت title شون میکنه اگه کلمه free داخلش بود انتخابش میکنه.

شکل کلی :

نکته : کلمه ی مورد نظر ما اگه به کلمه ی دیگری چسبیده باشد انتخاب نمی شود.

مثال :

امتحان کنید

Free-Learn

انتخابگر صفاتی که از یک کلمه خاص شروع می شوند

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

شکل کلی :

مثال :

امتحان کنید

Free-Learn

انتخابگر صفاتی که از یک کلمه خاص شروع می شوند (دیگه مهم نیست چسبیده باشه یا نه)

این روش همانند روش بالاست فقط با این تفاوت که دیگه براش مهم نیست کلمه خاص ما به دیگر کلمات چسبیده باشد یا نه، در هر صورت انتخابش میکنه.

شکل کلی :

مثال :

امتحان کنید

Free-Learn

انتخابگر صفاتی که با کلمه خاصی به پایان می رسند

این انتخابگر صفاتی رو انتخاب میکنه با یک کلمه خاص مورد نظر ما به پایان می رسند ، براش مهم نیست که کلمه قبلش بهش چسبیده باشه یا نه ! حتی مهم نیست که کلمه قبلش با کاراکترهای – یا _ به کلمه خاص ما چسبیده باشد.

شکل کلی :

مثال :

امتحان کنید

Free-Learn

انتخابگر صفاتی که حاوی کلمه مورد نظر ما باشد

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

شکل کلی :

مثال :

امتحان کنید

دوستان عزیز، بنده در مثال های بالا فقط روی صفت title از تگ img کار کردم، ولی شما میتونید روی هر تگی که دوس داشتید رو صفتش اینکارارو انجام بدید.

Free-Learn

انتخابگر ترکیبی یا Combinator در CSS

این نوع از انتخابگر داره رابطه های بین انتخابگرهارو مشخص میکنه، یعنی مثلا میگه انتخاب کن تمامی تگ های P که درون تگ DIV هستند. در ادامه با تمامی انتخابگرهای ترکیبی آشنا خواهید شد.

انواع انتخابگرهای ترکیبی در CSS

  • انتخاب کن تمامی تگ هایی که درون یک تگ دیگر است
  • انتخاب کن فرزندان یک تگ را
  • انتخاب کن اولین تگی که بلافاصله بعد از یک تگ دیگر اومده باشد
  • انتخاب کن تمامی تگ های موجود در یک صفحه را که بعد از تگ مورد نظر ما اومده باشد

Free-Learn

انتخاب کن تمامی تگ هایی که درون یک تگ دیگر است

در این روش داره میگه انتخاب کن تمامی تگ هایی که درون یک تگ دیگر هستند و سپس دستورات CSS مورد نظرمون رو روش اعمال کن.

شکل کلی :

مثال :

امتحان کنید

Free-Learn

انتخاب کن فرزندان یک تگ را

در این روش تمامی فرزندان یک تگ انتخاب می شود.

شکل کلی :

مثال : در این مثال یکی از تگ های p انتخاب نمی شود به دلیل اینکه اون تگ p فرزند تگ i است نه فرزند تگ div

امتحان کنید

Free-Learn

انتخاب کن اولین تگی که بلافاصله بعد از یک تگ دیگر اومده باشد

در این روش میره و اولین تگی که بلافاصله بعد از تگ مورد نظر ما اومده باشه رو انتخاب میکنه.

شکل کلی :

مثال : اولین تگ p که بعد از تگ div اومده باشه رو انتخاب میکنه

امتحان کنید

Free-Learn

انتخاب کن تمامی تگ های موجود در یک صفحه را که بعد از تگ مورد نظر ما اومده باشد

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

شکل کلی :

مثال :

امتحان کنید

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

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

Free-Learn

دریافت PDF یا پرینت این مطلب