انتخابگرهای CSS
یک انتخابگر CSS، عناصر HTML را که می‌خواهید استایل‌دهی کنید، انتخاب می‌کند.
انتخابگرهای CSS
انتخابگرهای CSS برای “یافتن” (یا انتخاب) عناصر HTML که می‌خواهید به آن‌ها استایل بدهید، استفاده می‌شوند.
می‌توان انتخابگرهای CSS را به پنج دسته تقسیم کرد:
- انتخابگرهای ساده (عناصر را بر اساس نام، id، یا کلاس انتخاب می‌کنند)
- انتخابگرهای ترکیب‌کننده (عناصر را بر اساس یک رابطه خاص بین آن‌ها انتخاب می‌کنند)
- انتخابگرهای شبه‌کلاس (عناصر را بر اساس حالت خاصی انتخاب می‌کنند)
- انتخابگرهای شبه‌عنصر (بخشی از یک عنصر را انتخاب و استایل‌دهی می‌کنند)
- انتخابگرهای صفتی (عناصر را بر اساس یک صفت یا مقدار صفت انتخاب می‌کنند)
این صفحه به توضیح انتخابگرهای پایه‌ای CSS می‌پردازد.
انتخابگر عنصر (element Selector) در CSS
انتخابگر عنصر عناصر HTML را بر اساس نام عنصر انتخاب می‌کند.
مثال
در اینجا، تمام عناصر <p> در صفحه با رنگ متن قرمز و تراز وسط چین نمایش داده می‌شوند:
p {
text-align: center;
color: red;
}انتخابگر id (id Selector) در CSS
انتخابگر id از ویژگی id یک عنصر HTML برای انتخاب یک عنصر خاص استفاده می‌کند.
id یک عنصر درون یک صفحه یکتا است، بنابراین انتخابگر id برای انتخاب یک عنصر منحصر به فرد استفاده می‌شود.
برای انتخاب عنصری با id خاص، از علامت هش # و به دنبال آن id عنصر استفاده کنید.
مثال
قانون CSS زیر برای عنصری با id=”para1″ اعمال می‌شود:
#para1 {
text-align: center;
color: red;
}توجه: نام id نباید با عدد شروع شود!
انتخابگر کلاس (class Selector) در CSS
.center {
text-align: center;
color: red;
}همچنین می‌توانید مشخص کنید که فقط عناصر HTML خاص تحت تأثیر یک کلاس قرار بگیرند.
مثال
در این مثال، تنها عناصر <p> با کلاس “center” قرمز و تراز وسط خواهند بود:
p.center {
text-align: center;
color: red;
}عناصر HTML همچنین می‌توانند به بیش از یک کلاس اشاره کنند.
مثال
در این مثال، عنصر <p> بر اساس کلاس “center” و کلاس “large” استایل‌دهی می‌شود:
<p class="center large">این پاراگراف به دو کلاس اشاره می‌کند.</p>توجه: نام کلاس نباید با عدد شروع شود!
انتخابگر همه‌گیر (Universal Selector) در CSS
* {
text-align: center;
color: blue;
}انتخابگر گروه‌بندی (Grouping Selector) در 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;
}
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام