آموزش سلکتورها در CSS
CSS Selector ها برای پیدا کردن و یا انتخاب عنصرهایی که می خواهید آن ها را استایل دهی کنید به کار می روند. در واقع شما با استفاده از سلکتورها یک عنصر را به منظور اعمال یکسری از ویژگی ها روی آن فرا می خوانید. می توان selector ها در CSS را به پنج دسته تقسیم بندی کرد:
- Selector های ساده (انتخاب کردن عنصر ها براساس نام، آیدی، کلاس)
- Combinator selectors (انتخاب کردن عنصر ها براساس یک رابطه ی به خصوص بین آنها)
- Pseudo-class selectors (انتخاب عنصر ها بر اساس یک وضعیت مشخص)
- Pseudo-elements selectors (انتخاب کردن و استایل دادن به یک قسمت از عنصر)
- Attribute selectors (انتخاب عنصر ها براساس یک ویژگی )
نکته: در نام گذاری سلکتورها باید نکات زیر را به خاطر داشته باشید:
- از علائمی مانند @,$,%,!,& و ... نمی توانید استفاده کنید.
- در هنگام انتخاب نام باید به خاطر داشته باشید که css به حروف کوچک و بزرگ حساس می باشد.
element Selector
element selector عنصرها را بر اساس نام عنصر انتخاب می کند. این نوع سلکتورها رایج ترین نوع از سلکتورها در زبان برنامه نویسی CSS هستند. برای مثال اگر تگ p را انتخاب کنید، ویژگی های مورد نظر روی تمام تگ های p در صفحه اعمال می شود.
در مثال بالا، تمام تگ های p در صفحه خاصیت وسط چین و رنگ قرمز را به خود گرفته اند. حال ممکن است از خود سوال کنید که چرا همه تگ های p چنین خاصیتی گرفته اند؟ جواب این است که چون ما نگفته ایم که کدام تگ خواص مورد نظر را دریافت کند و فقط اشاره کرده ایم به تگ p ، پس این خواص به همه تگ های p اعمال شد که نتیجه آن در زیر کاملا مشخص است:
id Selector
id selector عنصر هایی را براساس آیدی (شناسه منحصر به فرد) تعبیه شده توسط ما انتخاب می کند. مشخصه آیدی باید منحصر به فرد باشد و از هر آیدی فقط یک بار و برای یک عنصر می توان استفاده کرد. بنابراین id selector برای انتخاب فقط یک عنصر به کار می رود. برای انتخاب یک عنصر با آیدی خاص باید از یک علامت هش (#) و سپس نام آن آیدی استفاده کنید.
نکته (آیدی ها نمی توانند با عدد شروع شوند!)
در بالا، عنصر با شناسه منحصر به فرد para1 انتخاب شده و فقط و فقط به آن عنصر خواص وسط چین و رنگ قرمز اعمال شده است. در زیر می توانید نتیجه را مشاهده کنید.
class Selector
class selector عنصرهای به خصوصی را بر اساس کلاس اختصاص داده شده به آن ها انتخاب می کند. به طور کلی یکی از Attribute هایی که تمام تگ ها می توانند آن را در اختیار داشته باشند class نامیده می شود. برای انتخاب کردن عنصرها با استفاده از کلاس آن ها، یک نقطه (.) گذاشته و سپس نام کلاس را بنویسید.
در مثال بالا، تمام عناصری که کلاس center را داشته باشند انتخاب شده و ویژگی های وسط چین و رنگ قرمز را به خود می گیرند که نتیجه به شکل زیر است:
شما همچنین می توانید آن ویژگی که اعمال خواهد شد را فقط روی یک عنصر به خصوص اعمال کنید.
در مثال زیر فقط عنصر p تاثیر خواهد گرفت:
این یعنی فقط در میان تگ های p آنهایی که کلاس center را داشته باشند، ویژگی های وسط چین و رنگ قرمز را به خود می گیرند که نتیجه به شکل زیر است:
اگر مثلا یک تگ div کلاس center بگیرد، خواص بالا به آن تگ اعمال نخواهد شد. زیرا در CSS مشخصا فقط تگ های p که کلاس center دارند ذکر شده اند. همچنین عنصرها می توانند بیش از یک کلاس داشته باشند.
خروجی مثال بالا به شکل زیر است. همانطور که می بینید اولین پاراگراف که با تگ p مشخص شده وسط چین شده و رنگ متن آن قرمز شده است. دومین پارگراف علاوه بر کلاس center کلاس large هم گرفته و بنابراین نه تنها وسط چین شده و رنگ متن آن قرمز شده بلکه به واسه داشتن کلاس large نوشته آن بزرگتر شده است.
Universal Selector (سلکتور سراسری)
universal selector (*) تمام عنصرهای موجود در صفحه را در برمی گیرد.
این یعنی، تمام element های موجود در صفحه ویژگی های مورد نظر را بگیرند. همانطور که در تصویر زیر می بینید تمام عناصر صفحه وسط چین شده و رنگ آبی گرفته اند.
Grouping Selector
CSS Grouping Selector تمام عنصرها با تعریف یکسان در استایل را انتخاب می کند. به کد پایین توجه کنید: (h1 و h2 و عنصر p ویژگی های یکسان دارند):
اما این روش بهتری است که برای کوتاه کردن کد، بصورت گروهی و پشت سر هم عنصرها را انتخاب کنید.
نکته: از کاما (,) برای جدا کردن هر selector استفاده کنید.
در تصویر زیر همانطور که می بینید استایل مورد نظر برای تمام تگ های p، h1 و h2 اعمال می شود.
