انتخاب گرها (Selectors)
اینجا با انتخاب گرهای CSS آشنا می شویم. «انتخاب گر (Selector)» یعنی راهی برای پیدا کردن عناصر HTML. سپس به آنها استایل می دهیم. مثل انتخاب دانش آموز در کلاس و دادن کارت امتیاز است.
انتخاب گر چیست؟
انتخاب گر عنصر هدف را مشخص می کند. سپس «اعلان ها» داخل آکولاد می آیند. هر اعلان شامل «ویژگی» و «مقدار» است و با نقطه ویرگول جدا می شود.
انتخاب گر عنصری
نام تگ را بنویس. همان تگ هدف می شود.
p {
text-align: center;
color: red;
}
انتخاب گر شناسه (id)
برای یک عنصر یکتا، از # قبلِ شناسه استفاده کن.
#para1 {
text-align: center;
color: red;
}
نکته: نام id با عدد شروع نشود.
انتخاب گر کلاس (class)
برای گروهی از عناصر، از نقطه و نام کلاس استفاده کن.
.center {
text-align: center;
color: red;
}
می توان کلاس را روی یک تگ خاص محدود کرد.
p.center {
text-align: center;
color: red;
}
یک عنصر می تواند چند کلاس هم زمان داشته باشد.
<p class="center large">نمونه دو کلاس هم زمان</p>
نکته: نام کلاس با عدد شروع نشود.
انتخاب گر عام (*)
ستاره همه عناصر صفحه را هدف می گیرد.
* {
text-align: center;
color: blue;
}
گروه بندی انتخاب گرها
وقتی استایل ها یکی است، چند انتخاب گر را با ویرگول گروه کن.
h1, h2, p {
text-align: center;
color: red;
}
نکته: برای ادامه «انتخاب گرهای CSS» پیشرفته، فصل های «شبه کلاس» و «شبه عنصر» را نیز ببین.
جمع بندی سریع
- عنصر: نام تگ را بنویس.
- شناسه: از # قبلِ id استفاده کن.
- کلاس: از . قبلِ نام کلاس استفاده کن.
- عام: ستاره، همه را می گیرد.
- گروه بندی: چند هدف، یک قانون.