انتخابگرها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

انتخابگر (selector) های CSS برای یافتن (یا انتخاب) عناصر HTML مورد نظر برای طراحی استفاده می‌شود.[۱]

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

  • انتخابگرهای ساده (عناصر را بر اساس نام، شناسه، کلاس انتخاب می‌کنند)
  • انتخابگرهای ترکیبی (عناصر را بر اساس یک رابطه خاص بین آنها انتخاب می‌کند)
  • انتخابگرهای شبه کلاس (pseudo-class) (عناصر را بر اساس یک وضعیت خاص انتخاب می‌کند)
  • انتخابگرهای شبه عناصر (بخشی از یک عنصر را انتخاب و استایل‌دهی می‌کند)
  • انتخابگرهای خاصیت (عناصر را بر اساس یک خاصیت یا مقدار خاصیت انتخاب می‌کند)

در این صفحه اکثر انتخابگرهای مهم و اصلی CSS توضیح داده خواهد شد.

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

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

مثال

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

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


انتخابگر شناسه (id) در CSS

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

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

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

مثال

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

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


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

انتخابگر کلاس (class) در CSS

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

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

مثال

در این مثال تمامی عناصر 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>


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

انتخابگر کلی در CSS

انتخابگر کلی (Universal) * تمامی عناصر موجود در صفحه را انتخاب می‌کند:

مثال

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

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


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

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

به کد CSS زیر توجه کنید (عناصر h2 ،h1 و 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

انتخابگر مثال توضیح مثال
.class .intro همه عناصر HTML ای که کلاس آنها برابر با class="intro" است را انتخاب می‌کند
#id #firstname همه عناصر HTML ای که شناسه (id) آنها برابر با id="firstname" است را انتخاب می‌کند
* * همه عناصر را انتخاب می‌کند
انتخابگر عنصر (element) div, p تمامی عناصر div و عناصر p را انتخاب می‌کند

منابع آموزشی