سلکتور آی دی (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
