آموزش CSS | انتخابگرها (Selectors)

معرفی انتخابگرها و نحوه استفاده از آنها

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

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

1. انتخابگرهای عنصر (Element Selectors): این انتخابگرها به ما اجازه می‌دهند تا تمام المان‌های یک نوع خاص را هدف قرار دهیم. برای مثال، اگر بخواهیم تمام المان‌های <h1> را استایل دهی کنیم، می‌توانیم از انتخابگر h1 استفاده کنیم.

   h1 {
      color: blue;
      font-size: 24px;
   }

2. انتخابگرهای کلاس (Class Selectors): این انتخابگرها به ما اجازه می‌دهند تا المان‌هایی را که دارای یک کلاس خاص هستند، هدف قرار دهیم. برای استفاده از انتخابگر کلاس، باید از نقطه (.) قبل از نام کلاس استفاده کنیم. به عنوان مثال، اگر یک کلاس به نام highlight داشته باشیم:

   .highlight {
      background-color: yellow;
      font-weight: bold;
   }

3. انتخابگرهای شناسه (ID Selectors): این انتخابگرها مشابه انتخابگرهای کلاس هستند، اما فقط برای یک المان خاص در یک صفحه استفاده می‌شوند. برای استفاده از انتخابگر شناسه، باید از علامت # قبل از نام شناسه استفاده کنیم. به عنوان مثال، اگر یک شناسه به نام header داشته باشیم:

   #header {
      background-color: gray;
      color: white;
   }

4. انتخابگرهای ترکیبی (Compound Selectors): ما می‌توانیم انتخابگرها را ترکیب کنیم تا به المان‌های خاص‌تری دسترسی پیدا کنیم. به عنوان مثال، اگر بخواهیم تمام المان‌های <p> که دارای کلاس text هستند را هدف قرار دهیم، می‌توانیم از انتخابگر ترکیبی استفاده کنیم:

   p.text {
      font-size: 16px;
      color: green;
   }

نحوه استفاده از انتخابگرها

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

به عنوان مثال، فرض کنید که می‌خواهیم به تمام المان‌های <h2> رنگ قرمز بدهیم و به المان‌هایی که کلاس note دارند، رنگ پس‌زمینه زرد بدهیم:

h2 {
    color: red;
}

.note {
    background-color: yellow;
}

در اینجا، با استفاده از انتخابگرهای عنصر و کلاس، توانستیم به راحتی استایل‌های مختلفی را به المان‌های مختلف اعمال کنیم.

در نهایت، انتخابگرها ابزار قدرتمندی در CSS هستند که به ما اجازه می‌دهند تا به طور خاص به المان‌های مختلف در صفحه دسترسی پیدا کنیم و استایل‌های دلخواه را به آن‌ها اضافه کنیم.