گزینشگر یا سلکتور در CSS و انواع Selector ها

گزینشگر یا سلکتور (Selector) در CSS چیست؟

همانطور که در مقاله قواعد نحوی CSS مشاهده کردید از گزینشگر (سلکتور یا Selector) ها در CSS برای تعیین المان هایی استفاده می‌شود که می‌خواهیم استایل آن‌ها را مشخص کنیم. به عبارت بهتر سلکتورهای یک قانون مشخص می‌کنند اظهاریه های قانون (ترکیب‌های ویژگی و مقدارهایشان) باید روی چه المان هایی در صفحه اعمال شوند.

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

p, h2 {
  color: blue;
}

انواع سلکتور در CSS

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

سلکتورهای نوع المان، سلکتورهای کلاس و آی‌دی

یکی از انواع رایج سلکتورها، سلکتورهایی هستند که براساس نوع یا نام المان ها، آن‌ها را انتخاب می‌کنند. این سلکتورها با عنوان سلکتورهای نوع (Type Selectors) یا سلکتورهای نام (Name Selectors) المان شناخته می‌شوند. در مثال زیر نمونه‌ای از این گزینشگرها را مشاهده می‌کنید که تمام پاراگراف ها یا المان های <p> و هدینگ های سطح دوم یا المان های <h2> را هدف قرار می‌دهد. همانطور که مشاهده می‌کنید در این نوع سلکتورها صرفا نام المان بدون کاراکترهای < یا > ظاهر می‌شود.

p, h2 {
  ...
}

بیشتر بخوانید: آشنایی با سلکتور نوع المان در CSS

سلکتورهای کلاس (Class Selectors) هم به شما اجازه می‌دهند المان‌هایی با یک کلاس مشخص را هدف قرار دهید. در مثال زیر المان‌هایی که دارای کلاس myclass هستند توسط گزینشگر انتخاب می‌شوند. همانطور که مشاهده می‌کنید در این نوع سلکتورها پیش از نام کلاس یک کاراکتر نقطه (یا .) قرار می‌گیرد.

.myclass {
  ...
}

بیشتر بخوانید: آشنایی با کلاس و خصوصیت class در HTML

بیشتر بخوانید: آشنایی با سلکتور کلاس در CSS

از سلکتورهای آی‌دی (ID Selectors) هم می‌توانید برای انتخاب یک المان با یک شناسه منحصربفرد کمک بگیرید. در مثال زیر المانی که دارای آی‌دی myid است توسط گزینشگر انتخاب می‌شود. همانطور که مشاهده می‌کنید در این نوع گزینشگرها پیش از آی‌دی، یک کاراکتر # قرار می‌گیرد.

#myid {
  ...
}

بیشتر بخوانید: آشنایی با آی‌دی و خصوصیت id در HTML

بیشتر بخوانید: آشنایی با سلکتور آی دی در CSS

سلکتورهای شبه کلاس

سلکتورهای شبه کلاس (Pseudo-class Selectors) المان ها را براساس وضعیت خاصی که دارند انتخاب می‌کنند. برای مثال این نوع گزینشگرها می‌توانند لینکی که نشانگر ماوس روی آن قرار گرفته، لینک‌های ملاقات شده یا پاراگراف هایی که اولین فرزند والدشان هستند را برای تعیین استایل هدف قرار دهند.

در مثال زیر نمونه‌ای از سلکتورهای شبه کلاس را مشاهده می‌کنید. از این سلکتور برای تعیین استایل ماوس هاور المان‌های <a> یا لینک ها استفاده می‌شود. (به عبارت بهتر زمانی که نشانگر ماوس روی یک لینک یا یک المان <a> قرار می‌گیرد لینک موردنظر توسط همین گزینشگر انتخاب می‌شود). همانطور که مشاهده می‌کنید در این نوع Selector ها پیش از عنوان شبه کلاس یک کاراکتر کلن (یا :) قرار می‌گیرد.

a:hover {
  ...
}

بیشتر بخوانید: آشنایی با شبه کلاس ها در CSS

سلکتورهای شبه المان

سلکتورهای شبه المان (Pseudo-element Selectors) بخشی از یک یا چند المان را انتخاب می‌کنند. به عنوان نمونه سلکتور مورد استفاده در مثال زیر خط اول تمام پاراگراف ها را انتخاب می‌کند. همانطور که مشاهده می‌کنید در این نوع Selector ها پیش از عنوان شبه المان دو کاراکتر کلن (به صورت ::) درج می‌شود.

p::first-line {
  ...
}

بیشتر بخوانید: آشنایی با شبه المان ها در CSS

سلکتورهای خصوصیت

سلکتورهای خصوصیت (Attribute Selectors) می‌توانند المان ها را براساس وجود یک خصوصیت یا داشتن مقداری مشخص برای خصوصیت انتخاب کنند. به عنوان نمونه گزینشگر موجود در مثال زیر تمام لینک های با مقصد https://example.com (المان های <a> که مقدار خصوصیت href آن‌ها با این نشانی وب مقداردهی شده است) را هدف قرار می‌دهد. همانطور که مشاهده می‌کنید در این نوع گزینشگرها نام ویژگی (و مقدار آن در صورت نیاز) مشابه با نمونه داخل [   ] قرار می‌گیرد.

a[href="https://example.com"] {
  ...
}

بیشتر بخوانید: آشنایی با سلکتور خصوصیت در CSS

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

سلکتورهای ترکیب کننده (Combinator Selectors) به شما اجازه می‌دهند المان ها را براساس روابط‌شان با سایر المان‌ها انتخاب کنید. در این حالت از ترکیب سلکتورهای مختلف برای تعیین سلکتور موردنظر استفاده می‌شود. برای نمونه سلکتور موجود در مثال زیر تمام المان‌های <p> که فرزند مستقیم یک المان <div> هستند را انتخاب می‌کند.

div > p {
  ...
}

بیشتر بخوانید: آشنایی با سلکتور ترکیب کننده در CSS

بازگشت به فهرست مجموعه آموزشی CSS