سی‌اس‌اس/انتخابگر

واحدها

انتخابگر

رنگ

سی‌اس‌اس

انتخاب‌گرهای CSS

CSS selectors برای انتخاب عنصر یا عناصر HTML استفاده می‌شوند که می‌خواهیم روی آن‌ها استایل (Style) اعمال کنیم.

می‌توان انتخاب‌گرهای CSS را به پنج دسته تقسیم کرد:

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

در این صفحه، با ابتدایی‌ترین انتخاب‌گرهای CSS آشنا می‌شوید.

انتخاب‌گر نوع عنصر (Element Selector)

این انتخاب‌گر عناصر HTML را بر اساس نام عنصر انتخاب می‌کند.

p {
  text-align: center;
  color: red;
}

در این مثال، تمام عناصر <p> (پاراگراف‌ها) وسط‌چین و قرمز می‌شوند.

انتخاب‌گر ID در CSS

این انتخاب‌گر، از ویژگی id یک عنصر HTML برای هدف‌گیری یک عنصر خاص استفاده می‌کند. شناسه (id) در یک صفحه باید منحصربه‌فرد باشد.

برای انتخاب عنصری با شناسهٔ خاص، یک کاراکتر # پیش از نام id می‌نویسیم.

#para1 {
  text-align: center;
  color: red;
}

نکته: نام یک id نمی‌تواند با عدد شروع شود!

انتخاب‌گر class در CSS

این انتخاب‌گر عناصر HTML را بر اساس مقدار ویژگی class هدف قرار می‌دهد.

برای این کار، از یک نقطه . پیش از نام کلاس استفاده می‌کنیم.

.center {
  text-align: center;
  color: red;
}

در این مثال، همه عناصر دارای کلاس center قرمز و وسط‌چین خواهند بود.

همچنین می‌توان فقط عناصر خاصی را با کلاس مشخص استایل داد:

p.center {
  text-align: center;
  color: red;
}

در اینجا فقط <p>هایی که کلاس center دارند، استایل می‌گیرند.

عناصر HTML می‌توانند چند کلاس همزمان داشته باشند:

<p class="center large">This paragraph refers to two classes.</p>

در این مثال، عنصر <p> هم از کلاس center و هم از large استفاده می‌کند.

نکته: نام کلاس هم نباید با عدد شروع شود!

انتخاب‌گر جهانی (Universal Selector)

انتخاب‌گر * همهٔ عناصر HTML در صفحه را انتخاب می‌کند.

* {
  text-align: center;
  color: blue;
}

در این مثال، همه عناصر HTML در صفحه وسط‌چین و آبی می‌شوند.

انتخاب‌گر گروهی (Grouping Selector)

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

مثال بدون گروه‌بندی:

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

برای خلاصه‌کردن کد، انتخاب‌گرها را با ویرگول (,) از هم جدا می‌کنیم:

h1, h2, p {
  text-align: center;
  color: red;
}

این کد عملکردی مشابه مثال بالا دارد، ولی کوتاه‌تر و خواناتر است.