انتخاب‌گرهای پایه: اولین قدم برای استایل‌دهی

کشف انتخاب‌گرهای اولیه CSS: عنصر و جهان! 🔍

سلام دوباره به شما دوستای نازنین! تا اینجا با اجزای اصلی CSS مثل Selector, Property و Value آشنا شدیم. حالا وقتشه که اولین انتخاب‌گرهای واقعی رو یاد بگیریم. انتخاب‌گرها مثل ابزارهای ما هستن که بهمون می‌گن کدوم قسمت از صفحه وب رو باید هدف قرار بدیم. امروز می‌خوام دو تا از پایه‌ای‌ترین و پرکاربردترین انتخاب‌گرها رو بهتون معرفی کنم: انتخاب‌گر عنصر و انتخاب‌گر جهانی!

1. انتخاب‌گر عنصر (Element/Type Selector): هدف‌گیری بر اساس نام تگ! 🏷️

این ساده‌ترین نوع انتخاب‌گره. همونطور که از اسمش پیداست، شما بر اساس نام تگ HTML، اون عنصر رو انتخاب می‌کنین. مثلاً اگه بخواین تمام تگ‌های پاراگراف (`

`) توی صفحه استایل خاصی داشته باشن، از `p` به عنوان Selector استفاده می‌کنین.

مثال: فرض کنیم می‌خوایم تمام تیترهای سطح ۲ (`

`) توی صفحه، رنگ سبز داشته باشن.

h2 { /* Selector: h2 (یعنی تمام تگ‌های 
) */
  color: green; /* Property: color، Value: green */
}

وقتی این کد رو توی فایل CSS بنویسین و به صفحه HTML لینک کنین، تمام تگ‌های `

` که توی صفحه وجود دارن، سبز می‌شن! همینطور می‌تونین برای تگ‌های دیگه مثل `body`, `a`, `div`, `span`, `img` و… این کار رو انجام بدین.

این انتخاب‌گر خیلی مفیده، چون بهتون اجازه می‌ده یه استایل رو به صورت یکنواخت به همه عناصر از یک نوع خاص اعمال کنین. خیلی صرفه‌جویانه درسته؟ 😉

2. انتخاب‌گر جهانی (Universal Selector): همه رو بغل کن! 🤗

این انتخاب‌گر، یه جورایی “همه‌گیر” هست! 🤩 انتخاب‌گر جهانی با علامت ستاره (`*`) نشون داده می‌شه و به مرورگر می‌گه که تمام عناصر موجود در صفحه HTML رو انتخاب کنه. بله، درست شنیدین! همه چیز! از `` گرفته تا ``، `

* { /* Selector: * (یعنی تمام عناصر) */
  box-sizing: border-box; /* این خاصیت مهمه که حاشیه رو توی اندازه کلی عنصر حساب می‌کنه */
  border: 1px solid #ccc; /* Property: border، Value: 1px solid #ccc */
}

* {
  color: green; /* اول همه رو سبز کن */
}

p {
  color: blue; /* بعد پاراگراف‌ها رو آبی کن (اولویت داره!) */
}