تفصیل انتخاب‌گرهای id CSS
- صفحه قبلی تفصیل انتخاب‌گرهای کلاس CSS
- صفحه بعدی تفصیل انتخاب‌گرهای属性 CSS
انتخاب‌کننده شناسه ID به شما اجازه می‌دهد تا به صورت مستقل از عناصر مستند، سبک‌ها را تعیین کنید.
انتخاب‌کننده شناسه CSS
در برخی جنبه‌ها، انتخاب‌کننده شناسه مشابه انتخاب‌کننده‌های کلاس است، اما تفاوت‌های مهمی نیز دارد.
زبان‌نویسی
اول از همه، انتخاب‌کننده شناسه یک علامت # را قبل از خود دارد - که به عنوان شطرنجی یا # نیز شناخته می‌شود.
لطفاً به این قوانین زیر نگاه کنید:
*#intro {font-weight:bold;}
مانند انتخاب‌کننده‌های کلاس، می‌توان در انتخاب‌کننده شناسه انتخاب‌کننده‌های مخفی را نادیده گرفت. مثال قبلی نیز می‌تواند به این صورت نوشته شود:
#intro {font-weight:bold;}
تأثیر این انتخاب‌کننده مشابه خواهد بود.
تفاوت دوم این است که انتخاب‌کننده شناسه به جای مشخصه class ارزش‌های آن را ذکر نمی‌کند، بدون شک باید به مشخصه id ارزش‌های آن را ذکر کند.
در اینجا یک مثال از یک انتخاب‌کننده شناسه واقعی آورده شده است:
<p id="intro"<p>This is a paragraph of introduction.</p>
انتخاب‌کننده کلاس یا شناسه؟
در فصل انتخاب‌کننده‌های کلاس، ما توضیح دادیم که می‌توان برای تعداد زیادی از عناصر یک کلاس تعیین کرد. در فصل قبلی، نام کلاس important به عناصر p و h1 اعمال شد و همچنین می‌توان آن را به عناصر بیشتری اعمال کرد.
تفاوت 1: تنها می‌توان در مستند استفاده کرد
برخلاف کلاس، در یک مستند HTML، انتخاب‌کننده شناسه یک بار و تنها یک بار استفاده می‌شود.
تفاوت 2: نمی‌توان از لیست کلمات شناسه استفاده کرد
برخلاف انتخاب‌کننده‌های کلاس، انتخاب‌کننده‌های شناسه نمی‌توانند به طور ترکیبی استفاده شوند، زیرا مشخصه شناسه اجازه ندارد لیستی از کلمات با فاصله جدا شوند.
تفاوت 3: شناسه می‌تواند معانی بیشتری داشته باشد
مانند کلاس‌ها، می‌توانید شناسه‌ها را مستقل از عناصر انتخاب کنید. در برخی موارد، شما می‌دانید که یک شناسه خاص در مستند وجود خواهد داشت، اما نمی‌دانید که در کدام عنصر قرار خواهد گرفت، بنابراین می‌خواهید یک انتخاب‌کننده شناسه مستقل را اعلام کنید. به عنوان مثال، ممکن است بدانید که یک عنصر با شناسه mostImportant در یک مستند خاص وجود خواهد داشت. شما نمی‌دانید که این مهم‌ترین چیز یک پاراگراف، یک عبارت، یک آیتم لیست یا یک عنوان بخش است. شما تنها می‌دانید که در هر مستندی یک محتوای مهم وجود دارد که ممکن است در هر عنصری باشد و تنها یک بار وجود داشته باشد. در این حالت می‌توانید قانون زیر را نوشته کنید:
#mostImportant {color:red; background:yellow;}
این قانون با عناصر زیر هماهنگ خواهد شد (این عناصر نمی‌توانند در یک مستند همزمان وجود داشته باشند، زیرا آنها دارندگان شناسه مشابهی دارند):
<h1 id="mostImportant"!این مهم است! <em id="mostImportant"!این مهم است! <ul id="mostImportant">This is important!</ul>
تست شخصی کنید:
حسی‌بندی
لطفاً توجه داشته باشید که انتخاب‌گرهای کلاس و id ممکن است حسی‌بندی شوند. این بستگی به زبان مستند دارد. HTML و XHTML ارزش‌های کلاس و id را حسی‌بندی می‌کنند، بنابراین ارزش‌های کلاس و id باید با ارزش‌های مشابه در مستند مطابقت داشته باشند.
بنابراین، برای CSS و HTML زیر، عناصر به صورت تیره نمایش داده نمی‌شوند:
#intro {font-weight:bold;}
<p id="Intro"<p>This is a paragraph of introduction.</p>
به دلیل تفاوت در بزرگ و کوچک نوشتن حرف i، انتخاب‌گرها با عناصر بالا مطابقت نمی‌یابند.
- صفحه قبلی تفصیل انتخاب‌گرهای کلاس CSS
- صفحه بعدی تفصیل انتخاب‌گرهای属性 CSS
