انتخاب‌گرها: قلب CSS 🎯

سلکتورها (Selectors) به CSS میگن "کدوم المان‌ها رو انتخاب کنی". بدون سلکتور، CSS کاربردی نداره!

۱. سلکتور المان (Element Selector)

ساده‌ترین نوع! اسم تگ HTML رو می‌نویسید:

p {
  color: blue;
}

h1 {
  font-size: 32px;
}

a {
  text-decoration: none;
}

این کد می‌گه: "تمام تگ‌های <p> رو آبی کن، تمام<h1> ها رو 32 پیکسل کن، و همه لینک‌ها رو بدون خط زیر نشون بده."

۲. سلکتور کلاس (Class Selector)

با نقطه (.) شروع میشه و به attribute یعنی class در HTML اشاره داره:

این متن هایلایت شده
این عادی است
این هم هایلایته

.highlight {
  background-color: yellow;
  font-weight: bold;
}

متن من

۳. سلکتور شناسه (ID Selector)

با # شروع میشه و به attribute یعنی id اشاره داره. هر ID باید در کل صفحه یک‌تا باشه (unique)!

هدر سایت

#header {
  background: navy;
  color: white;
  padding: 20px;
}

۴. سلکتور یونیورسال (Universal Selector)

ستاره (*) یعنی "همه چیز":

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

این کد معروفه و توی شروع اکثر پروژه‌ها استفاده میشه. به همه المان‌ها میگه: "مارجین و پدینگ پیش‌فرض مرورگر رو صفر کن."

۵. سلکتور گروهی (Grouping Selector)

می‌خواید چند تا المان مختلف استایل یکسان بگیرن؟ با کاما (,) جداشون کنید:

h1, h2, h3 {
  font-family: "Yekan", Tahoma;
  color: #f8fafc;
}

.btn-primary, .btn-secondary, .btn-danger {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

  
فروشگاه آنلاین
  
بهترین محصولات را از ما بخرید
  <button class="btn">خرید</button>
  <button class="btn special">خرید ویژه</button>
  
تماس با ما: 123-456

/* تمام پاراگراف‌ها */
p {
  color: #F1F5F9;
}

/* فقط توضیحات */
.description {
  font-style: italic;
}

/* تمام دکمه‌ها */
.btn {
  background-color: #F1F5F9;
  color: white;
  padding: 10px 20px;
  border: none;
}

/* دکمه ویژه */
.btn.special {
  background-color: #ffd700;
}