تک دیک

واژه نامه و مجله آموزشی کامپیوتر و فناوری

سلکتور آی دی در CSS

سلکتور آی دی (ID selector) یکی از انواع رایج سلکتورها یا گزینشگرها در CSS به شمار می‌رود. این نوع سلکتورها المانی با یک آی‌دی (id) مشخص را برای تعیین استایل سی‌اس‌اس انتخاب می‌کنند. به عبارت بهتر با کمک سلکتورهای آی دی براساس مقدار خصوصیت id، المان موردنظر انتخاب می‌شود.

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

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

شیوه درج و استفاده از سلکتور آی دی در CSS

در سلکتورهای آی‌دی، ابتدا یک کاراکتر # و سپس مقدار id موردنظر درج می‌شود. به این ترتیب المانی در سند که دارای این مقدار برای خصوصیت id است انتخاب می‌شود. سینتکس کلی یک قانون با یک سلکتور آی دی در CSS به صورت زیر است:

#id-value {
  ...
}

از آنجایی که دو المان مختلف در یک سند HTML نمی‌توانند id های یکسان داشته باشند بنابراین سلکتور آی‌دی تنها برای انتخاب یک المان به کار می‌رود (در حالت ساده نوع این المان نیز اهمیتی ندارد). این درحالیست که از سلکتورهای کلاس برای انتخاب یک یا چند المان با کلاس مشخص استفاده می‌شود.

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

مثال

به عنوان یک مثال ساده برای انتخاب المانی با آی‌دی warning می‌توانید مشابه با نمونه زیر از گزینشگر #warning استفاده کنید. با توجه به بخش گزینشگرها و اظهاریه در این مثال، زمینه این المان با رنگ زرد مشخص می‌شود.

#warning {
  background: yellow;
}

فرض کنید در بخش بدنه (یا <body>) سند HTML، یک هدینگ سطح دو (یا المان <h2>) و دو پاراگراف (یا المان <p>) مشابه با نمونه زیر وجود دارد.

<h2>My Heading</h2>
<p>This is a simple paragraph.</p>
<p id="warning">This is a warning!</p>

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

نتیجه قانون CSS مثال با سلکتور آی‌دی برای انتخاب المان

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

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *