انتخاب گرهای CSS (Selectors): هدف گیری دقیق عناصر
در «انتخاب گرهای CSS» یاد می گیریم چگونه عناصر HTML را پیدا کنیم و به آن ها استایل بدهیم. بنابراین از دسته بندی انتخاب گرها شروع می کنیم و سپس با نمونه کدهای کوتاه، کاربرد هرکدام را می بینیم.
انواع انتخاب گرهای CSS
انتخاب گرها به پنج دسته اصلی تقسیم می شوند: ساده، ترکیبی (Combinator)، شبه کلاس (Pseudo-class)، شبه عنصر (Pseudo-element) و مبتنی بر صفت (Attribute).
- ساده: بر اساس نام تگ،
idیاclass - ترکیبی: بر اساس رابطه بین عناصر
- شبه کلاس: بر اساس «حالت» عنصر
- شبه عنصر: برای استایل دهی «بخشی» از عنصر
- صفت: بر اساس وجود یا مقدار یک صفت
نکته: در این صفحه، انتخاب گرهای ساده را مرور می کنیم. برای ادامه مسیر، به بخش های ترکیبی و شبه کلاس ها سر بزنید.
انتخاب گر عنصری (Element Selector)
با نوشتن نام تگ، همه آن عنصرها انتخاب می شوند.
p { text-align: center; color: red; }انتخاب گر شناسه (ID Selector)
برای یک عنصر یکتا در صفحه استفاده می شود؛ با پیشوند #.
#para1 { text-align: center; color: red; }هشدار: نام id نباید با عدد شروع شود.
انتخاب گر کلاس (Class Selector)
برای گروهی از عناصر با کلاس مشترک؛ با پیشوند ..
.center { text-align: center; color: red; }
p.center { text-align: center; color: red; }می توانید یک عنصر را به چند کلاس نسبت دهید و از ترکیب آن ها بهره ببرید.
انتخاب گر سراسری (Universal Selector)
با نماد * همه عناصر صفحه هدف قرار می گیرند.
* { text-align: center; color: blue; }گروه بندی انتخاب گرها (Grouping)
برای کاهش تکرار، چند انتخاب گر را با ویرگول جدا کنید.
h1, h2, p { text-align: center; color: red; }مسیر ادامه یادگیری
پس از «انتخاب گرهای CSS»، مباحث سینتکس CSS و روش های استفاده (How To) را مرور کنید؛ سپس به شبه کلاس ها و شبه عناصر بروید.