در حال بارگذاری...

سلکتورهای CSS

هر قانون CSS دو کار دارد: مشخص کند چه چیزی استایل بگیرد و چطور. «چطور» را قبلاً با property، value و واحدها تمرین کرده‌اید. این جلسه سراغ «چه چیزی» می‌رود، یعنی سلکتور که اول هر قانون می‌آید.

سلکتورهای CSS چیست؟

سلکتور الگویی است که به مرورگر می‌گوید استایل‌های داخل بلوک declaration را روی کدام عناصر HTML اعمال کند. اگر عنصری در صفحه با سلکتور جور باشد، همهٔ استایل‌های داخل { } را می‌گیرد.

انواع سلکتور پایه در یک نگاه

فعلاً با همین چهار مورد شروع کنید. در جلسه‌های بعد با combinator، attribute و pseudo-class هم آشنا می‌شوید؛ اما اول روی element، class، id و * مسلط شوید.

📊 سلکتورهای پایهٔ CSS

سلکتور چه چیزی را انتخاب می‌کند مثال
Element (type) همهٔ عناصری که نام تگشان همین است p { … }
Class عناصری که این class را دارند .card { … }
Id تنها عنصری که این id را دارد #hero { … }
Universal همهٔ عناصر (با احتیاط) * { … }

سلکتور element (type)

سلکتور element همان نام تگ است، بدون نقطه و بدون #. مثلاً h1 همهٔ تگ‌های <h1> صفحه را استایل می‌دهد و p همهٔ پاراگراف‌ها را. وقتی بخواهید برای یک تگ ظاهر پایه و یکدست تعیین کنید، این پرکاربردترین ابزار است.

سلکتور element برای تیتر و پاراگراف

css
CSS Code 
h1 {
color: #0f766e;
font-size: 2rem;
}

p {
color: #334155;
line-height: 1.6;
}

سلکتور type کجا به درد می‌خورد؟

برای تنظیمات پایهٔ کل سایت: رنگ متن body، وزن تیترها، فاصلهٔ فهرست‌ها. اما اگر فقط بعضی از پاراگراف‌ها باید متفاوت باشند، به‌جای عوض‌کردن ظاهر همهٔ pها از class استفاده کنید.

سلکتور class

سلکتور class با یک نقطه (.) و بعد نام class نوشته می‌شود. در HTML هم عنصر را با class="card" علامت می‌زنید. یک class را می‌شود روی هر تعداد عنصر گذاشت؛ برای همین class اصلی‌ترین ابزار برای استایل‌های قابل‌استفادهٔ مجدد است.

سلکتور class برای کارت‌های قابل‌استفادهٔ مجدد

css
CSS Code 
.card {
background: #f8fafc;
border: 1px solid #cbd5e1;
padding: 1rem;
border-radius: 8px;
}

نام class در HTML باید دقیقاً همان باشد

قانون .card فقط روی عناصری اثر می‌کند که واقعاً class="card" دارند (یا چند class که یکی‌شان card است). املا باید حرف‌به‌حرف یکی باشد؛ .Card با .card فرق دارد.

سلکتور id

سلکتور id با یک # و بعد نام id نوشته می‌شود و در HTML با id="hero" مشخص می‌شود. id باید در صفحه یکتا باشد، یعنی فقط روی یک عنصر. برای بیشتر استایل‌ها سراغ class بروید و id را برای یک جزء مهم و منحصربه‌فرد صفحه نگه دارید.

سلکتور id برای یک بنر یکتا

css
CSS Code 
#hero {
min-height: 40vh;
background: #0f172a;
color: #f8fafc;
padding: 2rem;
}

سلکتور universal (*)

سلکتور * همهٔ عناصر را انتخاب می‌کند. گاهی برای یک reset ساده به کار می‌رود، مثلاً تنظیم box-sizing. ولی اگر با آن به همه‌چیز رنگ یا margin بدهید، به‌راحتی چیدمانتان به‌هم می‌ریزد. برای ظاهر معمولی صفحه سلکتورهای دقیق‌تر انتخاب کنید.

استفادهٔ محتاطانه از سلکتور universal

css
CSS Code 
* {
box-sizing: border-box;
}

کنار هم گذاشتن سلکتورها در یک صفحه

stylesheet واقعی معمولاً ترکیبی از همه است: تنظیمات پایه با element، قطعه‌های تکرارشونده با class و فقط چند هدف خاص و یکتا با id. نمونهٔ کوتاه زیر همین عادت را نشان می‌دهد. لازم نیست برای هر قانون id بسازید.

ترکیب کوچکی از انواع سلکتور در یک صفحه

css
CSS Code 
body {
font-family: Georgia, serif;
margin: 0;
}

.card {
max-width: 28rem;
margin: 1rem;
}

#hero {
padding: 2rem;
}

class یا id؟ یک قاعدهٔ عملی

  • برای دکمه، کارت، لینک منو و هر چیزی که ممکن است دوباره استفاده شود class بگذارید
  • فقط وقتی هدف واقعاً یکتاست (مثلاً بنر اصلی صفحه یا کادر جست‌وجوی اصلی) از id استفاده کنید
  • برای هر باکس یک id جدید نسازید؛ هم جلوی استفادهٔ مجدد را می‌گیرد و هم در درس‌های بعدی دربارهٔ cascade دردسر درست می‌کند

خودتان امتحان کنید

  1. در یک صفحهٔ تمرینی یک <h1>، دو <p>، یک <div class="card"> و یک <section id="hero"> بگذارید.
  2. یک قانون element برای h1 و p بنویسید.
  3. برای .card فاصلهٔ داخلی (padding)، پس‌زمینهٔ روشن و border تعیین کنید.
  4. برای #hero پس‌زمینهٔ تیره و متن روشن بگذارید.
  5. اختیاری: * { box-sizing: border-box; } را اضافه کنید و ببینید padding داخل کارت رفتار قابل‌پیش‌بینی‌تری پیدا می‌کند.

اشتباهات رایج

  • نوشتن card { } به‌جای .card { }: بدون نقطه، مرورگر دنبال تگی به نام card می‌گردد که در HTML وجود ندارد
  • نوشتن hero { } به‌جای #hero { }: علامت # جا افتاده است
  • گذاشتن class="card" در HTML ولی نوشتن .crd در CSS: چون نام‌ها نمی‌خوانند، هیچ استایلی اعمال نمی‌شود
  • دادن یک id تکراری به چند عنصر: HTML نامعتبر می‌شود و هدف‌گیری قابل‌پیش‌بینی نیست
  • استفاده از سلکتور type برای طراحی یک بلوک خاص: وقتی فقط یک بلوک را می‌خواستید، همهٔ pها یا divهای صفحه عوض می‌شوند

خلاصه

  • سلکتور مشخص می‌کند استایل‌های یک قانون به کدام عناصر HTML برسد
  • سلکتور element همان نام تگ است (h1، p)
  • سلکتور class با نقطه شروع می‌شود (.card) و با ویژگی class در HTML جور می‌شود
  • سلکتور id با # شروع می‌شود (#hero) و باید یک عنصر یکتا را هدف بگیرد
  • * همه‌چیز را انتخاب می‌کند؛ برای reset سنجیده خوب است، برای تزئین کل صفحه نه
  • برای اجزای قابل‌استفادهٔ مجدد class بگذارید و id را کم و فقط برای موارد یکتا نگه دارید

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
8
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 1 از 1
Css آموزش