انتخابگرها
انتخابگر (به انگلیسی: selector)های CSS برای یافتن (یا انتخاب) عناصر HTML مورد نظر برای طراحی استفاده میشود.[۱]
میتوانیم انتخاب گرها را در CSS را به پنج دسته تقسیم کنیم:
- انتخابگرهای ساده (عناصر را بر اساس نام، شناسه، کلاس انتخاب میکنند)
- انتخابگرهای ترکیبی (عناصر را بر اساس یک رابطه خاص بین آنها انتخاب میکند)
- انتخابگرهای شبه کلاس (به انگلیسی: pseudo-class) (عناصر را بر اساس یک وضعیت خاص انتخاب میکند)
- انتخابگرهای شبه عناصر (بخشی از یک عنصر را انتخاب و استایلدهی میکند)
- انتخابگرهای خاصیت (عناصر را بر اساس یک خاصیت یا مقدار خاصیت انتخاب میکند)
در این صفحه اکثر انتخابگرهای مهم و اصلی CSS توضیح داده خواهد شد.
انتخابگر عنصر (به انگلیسی: element) در CSS
انتخابگر عنصر، عناصر HTML ای را بر اساس نام عنصر انتخاب میکند.
مثال
در این مثال، تمامی عناصر <p> در صفحه به صورت وسط چین و با رنگ قرمز قرار خواهند گرفت:
انتخابگر شناسه (به انگلیسی: id) در CSS
انتخابگر شناسه از ویژگی شناسه عنصر HTML، برای انتخاب آن عنصر استفاده میکند.
شناسه یک عنصر در صفحه منحصر به فرد است، بنابراین انتخابگر شناسه، برای انتخاب یک عنصر منحصر به فرد استفاده میشود!
برای انتخاب عنصری به وسیله یک شناسه خاص، کاراکتر # را به همراه شناسه آن عنصر بنویسید.
مثال
دستور CSS زیر بر عنصر HTML ای با شناسه برابر با id="para1" اعمال خواهد شد:
انتخابگر کلاس (به انگلیسی: class) در CSS
انتخابگر کلاس، عناصر HTML دارای کلاس خاصی را انتخاب می کند.
برای انتخاب عناصری باکلاس خاص، یک کاراکتر . به همراه نام کلاس بنویسید.
مثال
در این مثال تمامی عناصر HTML با class="center" قرمز رنگ و وسطچین خواهند شد:
همچنین میتوانید مشخص کنید که فقط عناصر HTML خاصی تحت تأثیر یک کلاس قرار بگیرند.
مثال
در این مثال تنها عناصر <p> با class="center" وسط چین خواهند شد:
همچنین عناصر HTML میتوانند با بیش از یک کلاس مرتبط باشند.
مثال
در این مثال عنصر <p> با توجه به class="center" و class="large" استایلدهی خواهد شد:
نکته: نام کلاس نمیتواند با عدد شروع شود!
انتخابگر کلی در CSS
انتخابگر کلی (به انگلیسی: Universal) * تمامی عناصر موجود در صفحه را انتخاب میکند:
مثال
دستور CSS زیر بر روی تمامی عناصر HTML موجود در صفحه تأثیر میگذارد:
انتخابگر گروهی در CSS
انتخابگر گروهی تمامی عناصر HTML با تعریف استایل یکسان را انتخاب میکند.
به کد CSS زیر توجه کنید (عناصر h2 ،h1 و p تعریف استایل یکسانی دارند):
بهتر است برای کوتاهتر شدن کد، انتخابگرها را گروهبندی کرد.
برای گروهبندی انتخابگرها، هر انتخابگر را به وسیله یک , از یکدیگر جدا کنید.
مثال
در این مثال ما انتخابگرهای کد بالا را گروهبندی کردیم :
خود را با تمرینها امتحان کنید!
تمامی انتخابگرهای ساده CSS
انتخابگر | مثال | توضیح مثال |
---|---|---|
.class | .intro | همه عناصر HTML ای که کلاس آنها برابر با class="intro" است را انتخاب میکند |
#id | #firstname | همه عناصر HTML ای که شناسه (id) آنها برابر با id="firstname" است را انتخاب میکند |
* | * | همه عناصر را انتخاب میکند |
انتخابگر عنصر (element) | div, p | تمامی عناصر div و عناصر p را انتخاب میکند |
منابع آموزشی