انتخابگرها در CSS — راهنمای جامع و عملی

انتخابگرها (Selectors) در CSS قلب تبدیل ساختار HTML به طراحی نهایی هستند. انتخابگرها تعیین می‌کنند که کدام عناصر HTML تحت تأثیر قوانین سبک قرار گیرند. در این مقاله به صورت روشن و عملی انواع انتخابگرها، سینتکس، قوانین specificity و نکات بهینه‌سازی را بررسی می‌کنیم.

ساختار پایه‌ای انتخابگر

ساده‌ترین انتخابگرها براساس نام تگ، کلاس یا شناسه هستند:

/* تگ */p { color: #333; }

/* کلاس */.card { padding: 16px; }

/* شناسه */#main-title { font-size: 24px; }

در این مثال‌ها، تمام عناصر <p>، همه المنت‌های با کلاس .card و تنها المنت با شناسه #main-title تحت قوانین قرار می‌گیرند. انتخابگرهای شناسه معمولاً specificity بالاتری نسبت به کلاس دارند.

ترکیبات و کامبیناتورها (Combinators)

برای هدف‌گیری دقیق‌تر ساختار درختی DOM از کامبیناتورها استفاده می‌شود:

• Descendant (فاصله): هر فرزندی در پایین سلسله‌مراتب — nav a
• Child (>): فقط فرزندان مستقیم — ul > li
• Adjacent sibling (+): برادر مجاور مستقیم — h1 + p
• General sibling (~): هر برادر بعدی — h1 ~ p

/* فقط لینک‌هایی که داخل nav هستند */nav a { color: blue; }

/* لیست‌های سطح اول */ul > li { list-style: none; }

کامبیناتورها کمک می‌کنند تا از انتخاب‌های عمومی جلوگیری و قوانین را محدودتر کنید که هم خوانایی و هم کارایی را بهتر می‌کند.

انتخابگرهای صفت (Attribute Selectors)

وقتی نیاز دارید عناصر بر اساس مقادیر صفات انتخاب شوند، از انتخابگرهای صفت استفاده کنید:

/* همه inputهایی که نوع آنها text است */input[type="text"] { border: 1px solid #ccc; }

/* فیلدهایی که name با "user-" شروع می‌شود */input[name^="user-"] { background: #f9f9f9; }

انواع متداول: [attr], [attr="value"], [attr^="start"], [attr$="end"], [attr*="contains"]. استفاده در فرم‌ها و کامپوننت‌های داینامیک بسیار کاربردی است.

پسو-کلاس‌ها و پسو-المنت‌ها (Pseudo-classes & Pseudo-elements)

پسو-کلاس‌ها برای حالت‌های غیرساختاری مثل هاور یا المان‌های انتخاب‌شده کاربرد دارند. پسو-المنت‌ها برای هدف‌گیری بخش‌هایی از یک عنصر مانند ::before و ::after استفاده می‌شوند.

a:hover { text-decoration: underline; }
input:focus { outline: 2px solid #4d90fe; }
button:disabled { opacity: 0.6; pointer-events: none; }

.card::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(#f00, #00f);
}

پسو-کلاس‌ها و پسو-المنت‌ها به شما امکان می‌دهند بدون اضافه کردن مارک‌آپ اضافی رفتار و ظاهر را کنترل کنید.

انتخابگرهای گروهی و تو در تو

برای کاهش تکرار سبک می‌توانید چند انتخابگر را با کاما گروه کنید. همچنین انتخابگرهای تو در تو پیچیدگی‌های متنوعی را ارائه می‌دهند:

/* گروهی */h1, h2, h3 { margin-bottom: 0.5rem; }

/* ترکیب پیچیده */article.post > header .meta a.active { color: #e6007e; }

گروه‌بندی خوانایی فایل CSS را افزایش می‌دهد، اما ترکیب‌های بسیار عمیق می‌تواند نشانگر ساختار HTML نامناسب یا وابستگی بیش‌ازحد باشد.

تعیین Specificity و قانون شاخ (Cascade)

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

قانون cascade به همراه اهمیت (!important) و ترتیب منابع نیز در نتیجه نهایی تأثیرگذار است. از !important تنها در موارد ضروری استفاده کنید.

انتخابگرهای جدید و بهینه‌سازی

تعدادی انتخابگر مفید جدید وجود دارند که نگهداری کد را آسان‌تر می‌کنند:

• :not() برای نادیده گرفتن برخی موارد
• :is() برای کاهش تکرار و بهبود specificity (مؤثر و کوتاه‌کننده)
• :where() مشابه :is() اما specificity صفر دارد

/* قبل: طولانی و تکراری */button.primary, a.primary, input.primary { color: white; }

/* با :is کوتاه‌تر */:is(button, a, input).primary { color: white; }

/* با :where بدون افزایش specificity */:where(button, a, input).primary { color: white; }

در این مثال :is() باعث خوانایی بالاتر می‌شود و :where() زمانی مفید است که نمی‌خواهید specificity را افزایش دهید.

نمونه بهینه‌سازی: از انتخابگرهای سنگین دوری کنید

انتخابگرهای بسیار پیچیده یا زنجیره‌های طولانی از کامبیناتورها می‌تواند باعث کاهش کارایی در صفحات بزرگ شود. بهتر است کلاس‌های واضح و محتوای معنایی ایجاد کنید.

/* نامطلوب — خیلی وابسته به ساختار */header nav ul li a.active { color: red; }

/* بهتر — کلاس مشخص */.nav-link.active { color: red; }

نسخه بهینه خواناتر و سریع‌تر است چون مرورگر سریع‌تر می‌تواند کلاس را تطبیق دهد و وابستگی به ساختار DOM را کاهش می‌دهد.

نکات کاربردی و بهترین شیوه‌ها

• از کلاس‌ها برای استایل‌دادن استفاده کنید نه تگ‌ها؛ این کار انعطاف‌پذیری را افزایش می‌دهد.
• قوانین را از کلی به خاص بنویسید تا cascade طبیعی رعایت شود.
• برای اجتناب از specificity بالا، از :where() یا ساده‌سازی ساختار کمک بگیرید.
• قبل از استفاده از انتخابگرهای پیچیده، بررسی کنید که آیا افزودن یک کلاس ساده بهتر نیست.
• برای اجزای قابل بازاستفاده، از انتخابگرهای محلی (scoped classes یا CSS Modules) استفاده کنید.

نتیجه‌گیری

انتخابگرها ابزار اصلی شما برای ارتباط بین HTML و CSS هستند. با درک انواع انتخابگرها، نحوه کار specificity و استفاده از انتخابگرهای مدرن مانند :is() و :where() می‌توانید کد خواناتر، قابل نگهداری‌تر و بهینه‌تری بنویسید. همیشه تعادل بین سادگی و دقت را حفظ کنید.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال