⭐️🎯 آموزش CSS Selectors؛ معرفی انتخابگرهای CSS با مثال‌های کاربردی

فهرست مطالب ▼

📘آشنایی با موضوع

در این راهنمای CSS Selectors یا انتخابگرهای CSS، با روش هدف گرفتن عناصر صفحه و اعمال استایل به آن ها آشنا می شوید. اگر در حال یادگیری CSS هستید یا برای طراحی سایت به دنبال کنترل دقیق ظاهر بخش های مختلف صفحه می گردید، شناخت انتخابگرها یکی از پایه های اصلی کار شما است.

CSS Selectors چیست و چه کاربردی دارد؟

🎯تعریف انتخابگر

انتخابگر CSS بخشی از یک قانون است که مشخص می کند کدام عنصر یا گروهی از عناصر HTML باید استایل بگیرند. برای نمونه، می توان با انتخابگر نام تگ تمام عنوان های صفحه را هدف گرفت، یا با کلاس فقط یک گروه مشخص از دکمه ها را تغییر داد. پس از انتخاب عنصر، ویژگی هایی مانند رنگ، اندازه متن، فاصله، پس زمینه و نحوه چیدمان روی آن اعمال می شود.

🧩ساختار یک قانون CSS

در یک قانون CSS، انتخابگر پیش از آکولاد قرار می گیرد و اعلان های استایل درون آکولاد نوشته می شوند. کد زیر همه پاراگراف های صفحه را هدف می گیرد و رنگ متن آن ها را تغییر می دهد:

p {
  color: #334155;
}

🧭انتخابگرها چگونه نوشته می شوند؟

انتخابگرها می توانند بر اساس نام تگ، مقدار ویژگی، کلاس، شناسه یا ارتباط میان عناصر نوشته شوند. همچنین امکان ترکیب چند انتخابگر وجود دارد تا قانون فقط در شرایط مشخصی اجرا شود. هرچه انتخابگر را هدفمندتر بنویسید، کنترل بیشتری روی ظاهر صفحه خواهید داشت؛ البته پیچیدگی بیش از اندازه می تواند خواندن و نگهداری کد را دشوار کند.

انواع اصلی انتخابگرهای CSS

🏷️انتخابگر نوع یا تگ

انتخابگر نوع با نام عنصر HTML نوشته می شود و تمام نمونه های همان تگ را در محدوده مربوط هدف می گیرد. برای مثال، انتخابگر h2 همه عنوان های سطح دوم را انتخاب می کند. این روش برای استایل های عمومی و یکپارچه مناسب است، اما اگر فقط یکی از عنوان ها باید ظاهر متفاوتی داشته باشد، بهتر است از کلاس استفاده کنید.

🔖انتخابگر کلاس

کلاس با نقطه پیش از نام آن مشخص می شود و می تواند به چند عنصر تعلق بگیرد. این انتخابگر در طراحی رابط کاربری کاربرد زیادی دارد؛ برای نمونه می توانید یک کلاس مشترک به چند کارت بدهید تا رنگ، حاشیه و فاصله همه آن ها یکسان باشد. نام کلاس در HTML بدون نقطه نوشته می شود، اما در فایل CSS نقطه بخشی از نشانه انتخابگر است.

.card {
  border: 1px solid #dbeafe;
  padding: 16px;
}

🆔انتخابگر شناسه

شناسه یا ID با علامت هشتگ در CSS هدف گرفته می شود و در یک صفحه باید برای عنصری یکتا در نظر گرفته شود. این انتخابگر برای بخش مشخصی مانند نوار اصلی صفحه کاربرد دارد. از آنجا که شناسه معمولاً اولویت بالاتری از کلاس دارد، استفاده بیش از حد از ID برای استایل های عمومی می تواند تغییرات بعدی را سخت تر کند.

🌐انتخابگر عمومی

علامت ستاره، انتخابگر عمومی CSS است و همه عناصر را در محدوده سند انتخاب می کند. از آن می توان برای تنظیم اولیه ویژگی هایی مانند box-sizing استفاده کرد. چون این انتخابگر گسترده عمل می کند، بهتر است فقط برای قواعد پایه و با در نظر گرفتن اثر آن بر کل صفحه به کار رود.

* {
  box-sizing: border-box;
}

انتخابگرهای ترکیبی و رابطه میان عناصر

🔗هدف گیری بر اساس ساختار صفحه

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

نماد یا الگو	نوع رابطه	نمونه کاربرد
`article p`	همه پاراگراف های درون article	انتخاب نوادگان در هر عمقی
`nav > a`	پیوندهای فرزند مستقیم nav	محدود کردن استایل به فرزندان بی واسطه
`h2 + p`	پاراگراف بلافاصله پس از h2	انتخاب خواهر مجاور
`h2 ~ p`	پاراگراف های هم سطح بعد از h2	انتخاب خواهرهای هم سطح بعدی

🧪نمونه انتخاب عناصر تو در تو

در نمونه زیر، انتخابگر اول همه پیوندهای موجود در عنصر nav را انتخاب می کند؛ انتخابگر دوم فقط پیوندهایی را می گیرد که فرزند مستقیم nav هستند. تفاوت این دو در ساختارهای چندلایه اهمیت دارد و انتخاب نادرست می تواند روی پیوندهای زیرمنو هم اثر بگذارد.

nav a {
  color: #2563eb;
}

nav > a {
  font-weight: 700;
}

انتخابگر ویژگی و شبه کلاس ها

🔍انتخابگر ویژگی

انتخابگر ویژگی برای هدف گرفتن عناصر بر اساس ویژگی های HTML یا مقدار آن ها به کار می رود. این شیوه برای انتخاب پیوندهایی با مقصد خاص، ورودی های دارای نوع مشخص یا عناصری با داده های سفارشی مفید است. با انتخاب دقیق ویژگی، در بسیاری از موارد نیاز به افزودن کلاس های متعدد کاهش پیدا می کند.

a[target="_blank"] {
  color: #7c3aed;
}

input[type="email"] {
  border-color: #3b82f6;
}

🖱️شبه کلاس ها

شبه کلاس ها وضعیت یا موقعیت یک عنصر را توصیف می کنند و با دو نقطه نوشته می شوند. برای نمونه، :hover هنگام قرار گرفتن نشانگر روی عنصر فعال می شود، :focus وضعیت تمرکز را نشان می دهد و :first-child برای انتخاب نخستین فرزند در میان هم سطح ها کاربرد دارد. استفاده درست از این حالت ها تجربه تعاملی و دسترس پذیری صفحه را بهتر می کند.

✨شبه عنصرها

شبه عنصرها معمولاً بخش مشخصی از یک عنصر را هدف می گیرند یا محتوایی تزئینی ایجاد می کنند. نشانه هایی مانند ::before و ::after برای افزودن محتوای نمایشی به کار می روند؛ در حالی که ::first-letter می تواند حرف نخست متن را متفاوت کند. محتوای مهم و ضروری صفحه را تنها با شبه عنصرها ایجاد نکنید، چون ممکن است برای ابزارهای کمکی قابل دسترسی نباشد.

مقایسه انتخابگرهای رایج CSS

انتخابگر	نحوه نوشتن	بهترین کاربرد	نکته
نوع	`p`	استایل عمومی تگ ها	همه نمونه های همان تگ را می گیرد
کلاس	`.button`	استایل مشترک چند عنصر	قابل استفاده مجدد در صفحه
شناسه	`#header`	یک بخش یکتا	برای هر صفحه بهتر است یکتا باشد
ویژگی	`[disabled]`	هدف گیری بر اساس ویژگی	امکان بررسی مقدار ویژگی را می دهد
شبه کلاس	`:hover`	تعامل یا وضعیت عنصر	با یک دونقطه نوشته می شود

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

⚠️به ویژگی اختصاصی بودن توجه کنید

وقتی چند قانون CSS یک ویژگی را برای یک عنصر تنظیم می کنند، مرورگر با توجه به آبشار، میزان اختصاصی بودن انتخابگر، ترتیب قوانین و اهمیت اعلان ها تصمیم می گیرد کدام مقدار اعمال شود. معمولاً انتخابگر ID اختصاصی تر از کلاس و کلاس اختصاصی تر از انتخابگر نوع است. به همین دلیل، اضافه کردن مکرر ID یا استفاده بی دلیل از !important راه مناسبی برای حل هر تعارض نیست؛ بهتر است علت تداخل را پیدا کنید و ساختار قانون را ساده نگه دارید.

✅نکته های کاربردی برای کدنویسی

کلاس های معنادار انتخاب کنید: نامی مانند .product-card هدف عنصر را روشن می کند و از نام های مبهم بهتر است.
از انتخابگرهای بیش از حد طولانی دوری کنید: زنجیره های پیچیده به ساختار فعلی HTML وابسته می شوند و تغییر آن ساختار را پرهزینه می کنند.
قواعد مشترک را دوباره استفاده کنید: اگر چند عنصر ظاهر مشابه دارند، به جای تکرار قوانین، یک کلاس مشترک تعریف کنید.
رفتار صفحه را آزمایش کنید: پس از تغییر انتخابگر، حالت های موبایل، تمرکز صفحه کلید و اجزای مشابه را بررسی کنید.
ساختار HTML را مرتب نگه دارید: انتخابگرهای قابل فهم در کنار نشانه گذاری درست، عیب یابی و توسعه پروژه را آسان تر می کنند.

🛠️چطور انتخابگر مناسب را پیدا کنیم؟

ابتدا مشخص کنید استایل باید روی یک عنصر، چند عنصر هم گروه یا مجموعه ای در یک بخش خاص اعمال شود. برای یک عنصر یکتا می توانید شناسه در نظر بگیرید، اما برای الگوهای تکرارشونده معمولاً کلاس انتخاب منعطف تری است. اگر شرط شما به ویژگی یا وضعیت عنصر وابسته است، انتخابگر ویژگی یا شبه کلاس را بررسی کنید. در پایان، قانون را در ابزار توسعه مرورگر آزمایش کنید تا مطمئن شوید عناصر ناخواسته را انتخاب نمی کند.

مرجع انتخابگرها در CSS در سه بخش

📚ادامه یادگیری انتخابگرها

برای یادگیری مرحله به مرحله و بررسی مثال های بیشتر، مرجع انتخابگرهای CSS در سه بخش تنظیم شده است. این تقسیم بندی کمک می کند ابتدا با انتخابگرهای پایه آشنا شوید و سپس سراغ ترکیب ها و موارد پیشرفته تر بروید:

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

⭐انتخاب دقیق، کد قابل نگهداری

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

سوالات متداول انتخابگرهای CSS

انتخابگر CSS چیست؟

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

تفاوت کلاس و شناسه در CSS چیست؟

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

انتخابگر فرزند با انتخابگر نواده چه تفاوتی دارد؟

فاصله میان دو انتخابگر همه عناصر نواده را در هر عمقی انتخاب می کند، اما علامت بزرگ تر فقط فرزند مستقیم را هدف می گیرد. برای مثال، nav a همه پیوندهای داخل منو را انتخاب می کند و nav > a فقط پیوندهایی را می گیرد که فرزند مستقیم nav هستند.

شبه کلاس در CSS چه کاربردی دارد؟

شبه کلاس برای انتخاب عنصر بر اساس وضعیت یا موقعیت آن به کار می رود. حالت هایی مانند hover و focus امکان تعریف استایل هنگام تعامل کاربر را می دهند و مواردی مانند first-child عناصر را با توجه به جایگاهشان در میان هم سطح ها انتخاب می کنند.

چرا استایل یک انتخابگر روی عنصر اعمال نمی شود؟

نام انتخابگر یا کلاس را بررسی کنید و مطمئن شوید عنصر در محدوده انتخاب شده قرار دارد. سپس ترتیب قوانین، اختصاصی بودن انتخابگر و وجود اعلان های متعارض را بررسی کنید. ابزار توسعه مرورگر نشان می دهد کدام قانون روی عنصر اعمال شده یا به وسیله قانون دیگری کنار گذاشته شده است.

آموزش و معرفی انتخابگرها CSS Selectors