انتخابگرها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
(تغییرمسیر از انتخابگرها در CSS۳)
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

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

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

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

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

انتخابگر عنصر (به انگلیسی: element) در CSS

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

مثال

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

1 p {
2   text-align: center;
3   color: red;
4 }


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

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

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

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

مثال

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

1 #para1 {
2   text-align: center;
3   color: red;
4 }


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

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

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

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

مثال

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

1 .center {
2   text-align: center;
3   color: red;
4 }


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

مثال

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

1 p.center {
2   text-align: center;
3   color: red;
4 }


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

مثال

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

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


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

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

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

مثال

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

1 * {
2   text-align: center;
3   color: blue;
4 }


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

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

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

 1 h1 {
 2   text-align: center;
 3   color: red;
 4 }
 5 
 6 h2 {
 7   text-align: center;
 8   color: red;
 9 }
10 
11 p {
12   text-align: center;
13   color: red;
14 }


بهتر است برای کوتاه‌تر شدن کد، انتخابگرها را گروه‌بندی کرد.

برای گروه‌بندی انتخابگرها، هر انتخابگر را به وسیله یک , از یک‌دیگر جدا کنید.

مثال

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

1 h1, h2, p {
2   text-align: center;
3   color: red;
4 }


خود را با تمرینها امتحان کنید!

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

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


منابع آموزشی