این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.

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

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

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

Free-Learn

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

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

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

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

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

Free-Learn

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

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

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

Free-Learn

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

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

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

مثال شماره ۱ : انتخاب تگ های P و H2 از صفحه و استایل دادن بهشون

امتحان کنید

مثال شماره ۲ : انتخاب تگ body ( تگ body هم که دیگه میدونید، یعنی کل صفحه )

امتحان کنید

Free-Learn

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

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

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

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

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

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

امتحان کنید

Free-Learn

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

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

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

مثال شماره ۱ : انتخاب کلاسی که اسمش test می باشد

امتحان کنید

مثال شماره ۲ : انتخاب یک کلاس یکسان از چندین تگ

امتحان کنید

مثال شماره ۳ : استفاده از چندین کلاس درون یک تگ

امتحان کنید

Free-Learn

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

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

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

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

مثال شماره ۱ : انتخاب تگ H2 که دارای ID بنام test می باشد

امتحان کنید

Free-Learn

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

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

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

مثال شماره ۱ : انتخاب تگ H2 که دارای کلاس بنام test می باشد

امتحان کنید

Free-Learn

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

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

یعنی اگه مثلا میخواستیم برای p و h2 و h3 رنگ متن آبی تعریف کنیم، دیگه نیاز نیست بیایم و دونه به دونه تعریف کنیم بلکه بصورت گروهی انتخاب میکنیم و بهشون استایل میدیم.

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

امتحان کنید

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

امتحان کنید

Free-Learn

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

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

امتحان کنید

Free-Learn

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

Free-Learn

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