CSS

CSS — انتخاب گرهای CSS (Selectors)

آخرین بروزرسانی: 1404/07/12
قبلی: سینتکس CSS (Syntax) بعدی: نحوه استفاده از CSS (How To)

انتخاب گرهای 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) را مرور کنید؛ سپس به شبه کلاس ها و شبه عناصر بروید.

قبلی: سینتکس CSS (Syntax) بعدی: نحوه استفاده از CSS (How To)