در دنیای CSS، انتخابگرها (Selectors) نقش ردیاب را بازی میکنند. کارشان این است که بین کلی کد HTML، دقیقاً بگردند و آن عنصری که مد نظر شماست را پیدا کنند تا بتوانید به آن استایل بدهید.
انتخابگرهای CSS کلاً به ۵ دسته بزرگ تقسیم میشوند:
انتخابگرهای ساده (Simple selectors): پیدا کردن عناصر بر اساس اسم، کلاس یا آیدی (پایهایترین حالت).
انتخابگرهای ترکیبی (Combinator selectors): پیدا کردن عناصر بر اساس رابطهای که با هم دارند (مثل فرزندی، خواهری و برادری!).
انتخابگرهای شبهکلاس (Pseudo-class selectors): پیدا کردن عناصر بر اساس وضعیتی که تویش هستند (مثلاً وقتی کاربر ماوس را روی دکمه میبرد).
انتخابگرهای شبهعنصر (Pseudo-elements selectors): استایل دادن به یک بخش خاص از یک عنصر (مثلاً فقط حرف اول یک پاراگراف).
انتخابگرهای صفت (Attribute selectors): پیدا کردن عناصر بر اساس ویژگیهای خاصی که در HTML دارند.
در این بخش میخواهیم با هم دستهی اول (انتخابگرهای ساده) که از همه مهمتر و پرکاربردتر هستند را یاد بگیریم. آمادهاید؟
این انتخابگر خیلی رک و راست است. اسم تگ HTML را مینویسید و CSS بدون هیچ واسطهای میرود سراغ تمام تگهایی که با آن اسم در صفحه وجود دارند.
مثال: میخواهیم هر چه پاراگراف (<p>) در صفحه داریم، وسطچین و قرمز شوند:
p {
text-align: center;
color: red;
}
با این کد، بدون استثنا تمام پاراگرافهای سایت شما تغییر قیافه میدهند.
در HTML، ویژگی id مثل شماره ملی یا اثر انگشت یک عنصر است؛ یعنی در یک صفحه، فقط و فقط یک عنصر میتواند یک آیدی مشخص داشته باشد.
در CSS برای اینکه بگوییم منظورمان یک آیدی خاص است، از علامت هشتگ (#) استفاده میکنیم.
مثال: میخواهیم به عنصری که آیدی آن para1 است استایل بدهیم:
#para1 {
text-align: center;
color: red;
}
⚠️ نکته طلایی: یادتان باشد که نام آیدی هیچوقت نباید با عدد شروع شود! (مثلاً 1para غلط است).
برعکس آیدی، شما میتوانید یک class را به چندین و چند عنصر در صفحه بدهید. کلاسها برای مواقعی عالی هستند که میخواهید یک استایل مشابه را به بخشهای مختلف بدهید.
در CSS برای صدا زدن یک کلاس، از علامت نقطه (.) استفاده میکنیم.
مثال: میخواهیم هر عنصری که کلاسش center است، وسطچین و قرمز شود:
.center {
text-align: center;
color: red;
}
محدود کردن کلاس به یک تگ خاص:
اگر بخواهید بگویید «فقط پاراگرافهایی که کلاسشان center است تغییر کنند، نه بقیه تگها»، اسم تگ را میچسبانید به نقطه:
p.center {
text-align: center;
color: red;
}
استفاده از چند کلاس برای یک عنصر:
یک عنصر HTML میتواند همزمان عضو چند تیم (کلاس) باشد! کافی است اسم کلاسها را با فاصله در HTML بنویسید:
<p class="center large">این پاراگراف همزمان دو تا کلاس دارد.</p>
(در این حالت پاراگراف هم استایلهای کلاس center را میگیرد و هم کلاس large).
⚠️ نکته طلایی: نام کلاس هم مثل آیدی نمیتواند با عدد شروع شود!
علامت ستاره (*) در CSS یعنی «همه چیز!». اگر میخواهید استایلی بنویسید که روی تکتک عناصر کل صفحه (بدون هیچ استثنایی) اعمال شود، از ستاره استفاده کنید.
مثال: میخواهیم کل متنهای سایت بدون توجه به تگشان، آبی و وسطچین شوند:
* {
text-align: center;
color: blue;
}
گاهی اوقات پیش میآید که میبینید کدهایتان دارند تکرار میشوند؛ مثلاً برای تگهای 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;
}
| انتخابگر | مثال | این کد چیکار میکنه؟ |
| آیدی | #firstname | عنصری که دقیقاً id="firstname" دارد را پیدا میکند. |
| کلاس | .intro | تمام عناصری که کلاس class="intro" دارند را پیدا میکند. |
| سراسری | * | بدون استثنا همه عناصر صفحه را انتخاب میکند. |
| تگ (عنصر) | p | تمام تگهای پاراگراف (<p>) در صفحه را پیدا میکند. |
| گروهی | div, p | تمام تگهای <div> و تمام تگهای <p> را با هم انتخاب میکند. |
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://www.w3schools.com/css/