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

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

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

Free-Learn

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

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

بطور کلی انتخابگر یعنی اینکه انتخاب کن از صفحه وب من فلان تگ رو سپس اعمال کن یکسری ویژگی هارو توسط دستورات CSS ، همین تموم شد رفت!

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

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

Free-Learn

آموزش انواع انتخابگر در CSS

انتخابگرها دارای نوع های مختلفی می باشند که در ادامه آنها را بطور کامل آموزش خواهم داد، لذا چون ممکنه این مطلب یکمی طولانی بشه بخاطره همین بعضی از انتخابگر هارو جلسه بعدی آموزش خواهم داد.

  • انتخابگر تگ یا عنصر
  • انتخابگر ID
  • انتخابگر کلاس یا Class
  • انتخابگر تگ با ID یا Class خاص
  • انتخابگر گروهی
  • انتخابگر کل
  • انتخابگر صفت (در جلسه بعدی آموزش داده خواهد شد)
  • انتخابگر ترکیبی (در جلسه بعدی آموزش داده خواهد شد)

Free-Learn

انتخابگر تگ یا عنصر

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

در این روش کافیه ما فقط اسم تگ رو بنویسیم، فقط همین ! یعنی اگه من بخوام رنگ متن پاراگراف های موجود در صفحه رو آبی کنم کافیه از دستور زیر استفاده کنم :

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

مثال شماره ۱ : انتخاب تمامی تگ های P یا ( پاراگراف ها ) در صفحه

امتحان کنید

مثال شماره ۲ : انتخاب تمامی تگ های h2 در صفحه

امتحان کنید

مثال شماره ۳ : انتخاب تگ body در صفحه (ویژگی های CSS روی تمامی تگ های موجود در صفحه اعمال خواهد شد)

امتحان کنید

Free-Learn

انتخابگر آی دی یا ID

در این روش ما میایم و ID یا آی دی و یا در کل همون شناسه ی یک تگ رو مینویسیم و در نهایت دستورات CSS مورد نظرمون رو روش اعمال میکنیم.

پیشنهاد میکنم حتما آموزش نحوه ایجاد ID در تگ های HTML را یاد بگیرید.

برای اینکه بتونیم ID یک تگ رو در CSS فراخوانی کنیم باید بصورت زیر عمل کنیم، یا بطور کلی نحوه فراخوانی ID در CSS بصورت زیر می باشد :

پس اول یک علامت شارپ یا # میزاریم سپس نام ID مون رو مینویسیم و در نهایت دستورات CSS مورد نظرمون رو وارد مینماییم.

مثال شماره ۱ :

امتحان کنید

مثال شماره ۲ :

امتحان کنید

Free-Learn

انتخابگر کلاس یا Class

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

پس یعنی اول یک نقطه ( . ) میزاریم سپس نام کلاسمون رو مینویسیم و در نهایت دستورات CSS مورد نظرمون رو اعمال مینماییم.

مثال شماره ۱ :

امتحان کنید

Free-Learn

انتخابگر تگ با ID خاص

خب حالا این ( انتخابگر تگ با ID خاص ) یعنی چی!؟ یعنی اینکه مثلا من یک ID در درون یک تگ ایجاد کردم سپس در CSS فقط میخوام همون تگ با همون ID انتخاب بشه، نه بیشتر نه کمتر!

شکل کلی برای انتخابگر تگ با ID خاص بصورت زیر می باشد :

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

مثال برای انتخابگر تگ با ID خاص :

امتحان کنید

انتخابگر تگ با Class خاص

شکل کلی انتخابگر تگ با Class خاص بصورت زیر می باشد :

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

مثال برای انتخابگر تگ با کلاس خاص :

امتحان کنید

Free-Learn

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

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

مثال شماره ۱ : انتخابگر گروهی تگ ها بدون کلاس و ID خاص

امتحان کنید

مثال شماره ۲ : انتخابگر گروهی تگ ها با کلاس و ID های خاص

امتحان کنید

Free-Learn

انتخابگر کل یا انتخابگر تمامی تگ ها

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

امتحان کنید

Free-Learn

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

Free-Learn

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