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

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

انتخابگرهای (selectors) CSS برای «پیدا کردن» (یا انتخاب کردن) عناصر HTMLای که می‌خواهید استایل‌دهی کنید، استفاده می‌شوند.

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

• انتخابگرهای ساده (Simple selectors): (انتخاب عناصر بر اساس نام، id، کلاس)

• انتخابگرهای ترکیبی (Combinator selectors): (انتخاب عناصر بر اساس یک رابطه خاص بین آن‌ها)

• انتخابگرهای شبه-کلاس (Pseudo-class selectors): (انتخاب عناصر بر اساس یک وضعیت (state) خاص)

• انتخابگرهای شبه-عنصر (Pseudo-elements selectors): (انتخاب و استایل‌دهی بخشی از یک عنصر)

• انتخابگرهای صفت (Attribute selectors): (انتخاب عناصر بر اساس یک صفت (attribute) یا مقدار صفت)

این صفحه پایه‌ای‌ترین انتخابگرهای CSS را توضیح خواهد داد.

انتخابگر عنصر (element) در CSS

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

مثال

در اینجا، تمام عناصر <p> در صفحه وسط‌چین شده و رنگ متن آن‌ها قرمز خواهد بود:

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

انتخابگر id در CSS

انتخابگر id از صفت (attribute) id یک عنصر HTML برای انتخاب یک عنصر خاص استفاده می‌کند.

id یک عنصر در یک صفحه منحصر به فرد است، بنابراین انتخابگر id برای انتخاب یک عنصر واحد و منحصر به فرد استفاده می‌شود!

برای انتخاب یک عنصر با id خاص، یک کاراکتر هشتگ (#) و به دنبال آن id عنصر را بنویسید.

مثال

قانون CSS زیر بر روی عنصر HTML با id="para1" اعمال خواهد شد:

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

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

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

انتخابگر class عناصر HTML را با یک صفت (attribute) class خاص انتخاب می‌کند.

برای انتخاب عناصر با یک کلاس خاص، یک کاراکتر نقطه (.) و به دنبال آن نام کلاس را بنویسید.

مثال

در این مثال، تمام عناصر HTML با class="center" قرمز و وسط‌چین خواهند شد:

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

شما همچنین می‌توانید مشخص کنید که فقط عناصر HTML خاصی تحت تأثیر یک کلاس قرار بگیرند.

مثال

در این مثال، فقط عناصر <p> با class="center" قرمز و وسط‌چین خواهند شد:

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

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

مثال

در این مثال، عنصر <p> بر اساس class="center" و همچنین class="large" استایل‌دهی خواهد شد:

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

انتخابگر سراسری (Universal) در CSS

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

مثال

قانون CSS زیر بر روی تک‌تک عناصر HTML موجود در صفحه تأثیر خواهد گذاشت:

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

انتخابگر گروهی (Grouping) در CSS

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

به کد CSS زیر نگاه کنید (عناصر h1، h2 و p تعاریف استایل یکسانی دارند):

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;
}

تمام انتخابگرهای ساده CSS