فصل ۳ | CSS Basics

انتخاب‌گرها در CSS

Selector (انتخاب‌گر) بخشی از قانون CSS است که مشخص می‌کند استایل نوشته‌شده باید روی کدام عنصر یا عناصر HTML اعمال شود. شناخت انواع Selector‌ها یکی از مهم‌ترین قدم‌ها برای یادگیری CSS است، زیرا به شما اجازه می‌دهد دقیقاً همان عناصری را که می‌خواهید هدف قرار دهید.

انتخاب‌گر نوع (Type Selector)

این نوع Selector بر اساس نام تگ HTML عمل می‌کند و تمام عناصری با آن نام را در صفحه انتخاب می‌کند.

style.css
p {
    color: darkslategray;
}

در این مثال، تمام عناصر p در صفحه رنگ متن darkslategray می‌گیرند.

انتخاب‌گر کلاس (Class Selector)

با استفاده از Class، می‌توان یک یا چند عنصر خاص را بدون توجه به نوع تگشان انتخاب کرد. برای نوشتن Class Selector در CSS از علامت . قبل از نام کلاس استفاده می‌شود.

style.css
.highlight {
    background-color: yellow;;
}
index.html
<p class="highlight"> این متن هایلایت شده است</p>

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

در این مثال، کلاس highlight در فایل CSS تعریف شده و سپس به عنصر p در HTML اختصاص داده شده است. در نتیجه، فقط همین پاراگراف رنگ پس‌زمینه‌ی زرد می‌گیرد، نه بقیه‌ی پاراگراف‌های صفحه.

نکته: می‌توان یک کلاس را به چند عنصر مختلف نسبت داد و همچنین به یک عنصر چند کلاس مختلف اختصاص داد.

انتخاب‌گر شناسه (ID Selector)

ID برای انتخاب یک عنصر منحصربه‌فرد در صفحه استفاده می‌شود. برای نوشتن ID Selector در CSS از علامت # قبل از نام شناسه استفاده می‌شود.

style.css
#main-title {
    font-size: 28px;;
}
index.html
<h1 id="main-title">عنوان صفحه</h1>

در این مثال، شناسه‌ی main-title فقط به یک عنصر خاص در صفحه اختصاص داده می‌شود. برخلاف Class، هر مقدار ID باید در کل صفحه یکتا باشد و فقط یک‌بار استفاده شود.

انتخاب‌گر همگانی (Universal Selector)

این Selector با علامت * نمایش داده می‌شود و تمام عناصر موجود در صفحه را انتخاب می‌کند.

style.css
* {
    margin : 0;
    padding : 0;
}

در این مثال، margin و padding تمام عناصر صفحه برابر صفر تنظیم می‌شود. این روش معمولاً برای ریست کردن استایل‌های پیش‌فرض مرورگر در ابتدای پروژه استفاده می‌شود.

اولویت انتخاب‌گرها

هنگامی‌که چند Selector مختلف به یک عنصر استایل بدهند، مرورگر بر اساس میزان اهمیت هرکدام، استایل نهایی را تعیین می‌کند. به‌طور کلی ترتیب اهمیت به این صورت است:

  1. ID Selector بیشترین اولویت را دارد.
  2. Class Selector اولویت متوسط دارد.
  3. Type Selector کمترین اولویت را در بین این سه دارد.