انتخابگرهای (selectors) CSS برای «پیدا کردن» (یا انتخاب کردن) عناصر HTMLای که میخواهید استایلدهی کنید، استفاده میشوند.
ما میتوانیم انتخابگرهای CSS را به پنج دسته تقسیم کنیم:
انتخابگرهای ساده (Simple selectors): (انتخاب عناصر بر اساس نام، id، کلاس)
انتخابگرهای ترکیبی (Combinator selectors): (انتخاب عناصر بر اساس یک رابطه خاص بین آنها)
انتخابگرهای شبه-کلاس (Pseudo-class selectors): (انتخاب عناصر بر اساس یک وضعیت (state) خاص)
انتخابگرهای شبه-عنصر (Pseudo-elements selectors): (انتخاب و استایلدهی بخشی از یک عنصر)
انتخابگرهای صفت (Attribute selectors): (انتخاب عناصر بر اساس یک صفت (attribute) یا مقدار صفت)
این صفحه پایهایترین انتخابگرهای CSS را توضیح خواهد داد.
انتخابگر عنصر (element selector) عناصر HTML را بر اساس نام عنصر انتخاب میکند.
در اینجا، تمام عناصر <p> در صفحه وسطچین شده و رنگ متن آنها قرمز خواهد بود:
p {
text-align: center;
color: red;
}
انتخابگر id از صفت (attribute) id یک عنصر HTML برای انتخاب یک عنصر خاص استفاده میکند.
id یک عنصر در یک صفحه منحصر به فرد است، بنابراین انتخابگر id برای انتخاب یک عنصر واحد و منحصر به فرد استفاده میشود!
برای انتخاب یک عنصر با id خاص، یک کاراکتر هشتگ (#) و به دنبال آن id عنصر را بنویسید.
قانون CSS زیر بر روی عنصر HTML با id="para1" اعمال خواهد شد:
#para1 {
text-align: center;
color: red;
}
توجه: نام id نمیتواند با یک عدد شروع شود!
انتخابگر class عناصر HTML را با یک صفت (attribute) class خاص انتخاب میکند.
برای انتخاب عناصر با یک کلاس خاص، یک کاراکتر نقطه (.) و به دنبال آن نام کلاس را بنویسید.
در این مثال، تمام عناصر 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>
توجه: نام class نمیتواند با یک عدد شروع شود!
انتخابگر سراسری (*)، تمام عناصر HTML موجود در صفحه را انتخاب میکند.
قانون CSS زیر بر روی تکتک عناصر HTML موجود در صفحه تأثیر خواهد گذاشت:
* {
text-align: center;
color: blue;
}
انتخابگر گروهی تمام عناصر 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;
}
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: courses