آموزش سلکتورها در CSS

در این بخش از آموزش طراحی سایت به آموزش سلکتورها در css می پردازیم.

آموزش سلکتورها در CSS

آموزش سلکتورها در CSS

CSS Selector ها برای پیدا کردن و یا انتخاب عنصرهایی که می خواهید آن ها را استایل دهی کنید به کار می روند. در واقع شما با استفاده از سلکتورها یک عنصر را به منظور اعمال یکسری از ویژگی ها روی آن فرا می خوانید. می توان selector ها در CSS را به پنج دسته تقسیم بندی کرد:

  • Selector های ساده (انتخاب کردن عنصر ها براساس نام، آیدی، کلاس)
  • Combinator selectors (انتخاب کردن عنصر ها براساس یک رابطه ی به خصوص بین آنها)
  • Pseudo-class selectors (انتخاب عنصر ها بر اساس یک وضعیت مشخص)
  • Pseudo-elements selectors (انتخاب کردن و استایل دادن به یک قسمت از عنصر)
  • Attribute selectors (انتخاب عنصر ها براساس یک ویژگی )

نکته: در نام گذاری سلکتورها باید نکات زیر را به خاطر داشته باشید:

  • از علائمی مانند @,$,%,!,& و ... نمی توانید استفاده کنید.
  • در هنگام انتخاب نام باید به خاطر داشته باشید که css به حروف کوچک و بزرگ حساس می باشد.

element Selector

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

آموزش CSS

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

آموزش سلکتورها

id Selector

id selector عنصر هایی را براساس آیدی (شناسه منحصر به فرد) تعبیه شده توسط ما انتخاب می کند. مشخصه آیدی باید منحصر به فرد باشد و از هر آیدی فقط یک بار و برای یک عنصر می توان استفاده کرد. بنابراین id selector برای انتخاب فقط یک عنصر به کار می رود. برای انتخاب یک عنصر با آیدی خاص باید از یک علامت هش (#) و سپس نام آن آیدی استفاده کنید.

نکته (آیدی ها نمی توانند با عدد شروع شوند!)

آموزش طراحی سایت

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

آموزش Selector ها

class Selector

class selector عنصرهای به خصوصی را بر اساس کلاس اختصاص داده شده به آن ها انتخاب می کند. به طور کلی یکی از Attribute هایی که تمام تگ ها می توانند آن را در اختیار داشته باشند class نامیده می شود. برای انتخاب کردن عنصرها با استفاده از کلاس آن ها، یک نقطه (.) گذاشته و سپس نام کلاس را بنویسید.

آموزش CSS

در مثال بالا، تمام عناصری که کلاس center را داشته باشند انتخاب شده و ویژگی های وسط چین و رنگ قرمز را به خود می گیرند که نتیجه به شکل زیر است:

آموزش انتخابگرها

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

در مثال زیر فقط عنصر p تاثیر خواهد گرفت:

آموزش طراحی سایت

این یعنی فقط در میان تگ های p آنهایی که کلاس center را داشته باشند، ویژگی های وسط چین و رنگ قرمز را به خود می گیرند که نتیجه به شکل زیر است:

آموزش Selector ها

اگر مثلا یک تگ div کلاس center بگیرد، خواص بالا به آن تگ اعمال نخواهد شد. زیرا در CSS مشخصا فقط تگ های p که کلاس center دارند ذکر شده اند. همچنین عنصرها می توانند بیش از یک کلاس داشته باشند.

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

خروجی مثال بالا به شکل زیر است. همانطور که می بینید اولین پاراگراف که با تگ p مشخص شده وسط چین شده و رنگ متن آن قرمز شده است. دومین پارگراف علاوه بر کلاس center کلاس large هم گرفته و بنابراین نه تنها وسط چین شده و رنگ متن آن قرمز شده بلکه به واسه داشتن کلاس large نوشته آن بزرگتر شده است.

آموزش سلکتورها

Universal Selector (سلکتور سراسری)

universal selector (*) تمام عنصرهای موجود در صفحه را در برمی گیرد.

آموزش Selector ها

این یعنی، تمام element های موجود در صفحه ویژگی های مورد نظر را بگیرند. همانطور که در تصویر زیر می بینید تمام عناصر صفحه وسط چین شده و رنگ آبی گرفته اند.

آموزش طراحی سایت

Grouping Selector

CSS Grouping Selector تمام عنصرها با تعریف یکسان در استایل را انتخاب می کند. به کد پایین توجه کنید: (h1 و h2 و عنصر p ویژگی های یکسان دارند):

آموزش Selector ها

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

نکته: از کاما (,) برای جدا کردن هر selector استفاده کنید.

آموزش انتخابگرها

در تصویر زیر همانطور که می بینید استایل مورد نظر برای تمام تگ های p، h1 و h2 اعمال می شود.

آموزش سلکتورها 

آموزش طراحی سایت آموزش سلکتورها در CSS آموزش CSS آموزش id selector آموزش class selector دوره آموزش طراحی سایت