انتخاب‌گرهای id CSS

انتخاب‌کننده‌ی id

انتخاب‌کننده‌ی id می‌تواند برای تعیین استایل برای عنصر HTML با id خاص استفاده شود.

انتخاب‌کننده‌ی id با "#" تعریف می‌شود.

در دو انتخاب‌کننده‌ی id زیر، اولین یکی رنگ عنصر را به قرمز تعیین می‌کند و دومین یکی رنگ عنصر را به سبز تعیین می‌کند:

#red {color:red;}
#green {color:green;}

در کد HTML زیر، عنصر p با attribut id red به رنگ قرمز نمایش داده می‌شود و عنصر p با attribut id green به رنگ سبز نمایش داده می‌شود.

<p id="red">این پاراگراف قرمز است.</p>
<p id="green">این پاراگراف سبز است.</p>

توجه:attribut id فقط می‌تواند یک بار در هر سند HTML ظاهر شود. می‌خواهید دلیل را بدانید؟ لطفاً به XHTML: بازسازی وب‌سایت.

انتخاب‌کننده‌ی id و انتخاب‌کننده‌ی مشتق

در طراحی‌های مدرن، انتخاب‌کننده‌ی id اغلب برای ایجاد انتخاب‌کننده‌ی مشتق استفاده می‌شود.

#sidebar p {
	نوع‌نویسی: italic;
	text-align: right;
	مجردار از حاشیه‌ی بالا: 0.5em;
	}

این استایل تنها به پاراگراف‌هایی که در داخل عنصر با id sidebar ظاهر می‌شوند، اعمال می‌شود. این عنصر احتمالاً div یا یک سلول جدول است، هرچند ممکن است یک جدول یا عنصر بلوک دیگر نیز باشد. حتی می‌تواند یک عنصر درون‌خطی باشد، مانند <em></em> یا <span></span>، اما این استفاده غیرقانونی است زیرا نمی‌توان <p> را در یک عنصر درون‌خطی <span> قرار داد (اگر دلیل را فراموش کردید، لطفاً به XHTML: بازسازی وب‌سایت()).

یک انتخاب‌کننده، چندین کاربرد

حتی اگر عناصر برچسب‌گذاری شده به عنوان sidebar فقط می‌توانند یک بار در سند ظاهر شوند، این انتخاب‌کننده‌ی id به عنوان انتخاب‌کننده‌ی مشتق نیز می‌تواند چندین بار استفاده شود:

#sidebar p {
	نوع‌نویسی: italic;
	text-align: right;
	مجردار از حاشیه‌ی بالا: 0.5em;
	}
#sidebar h2 {
	اندازه‌نویسی: 1em;
	وزن‌نویسی: normal;
	نوع‌نویسی: italic;
	مجردار از حاشیه;
	خط‌کش: 1.5;
	text-align: right;
	}

در اینجا، با تفاوت‌های واضح با سایر عناصر p در صفحه، عنصر p در sidebar به طور خاص پردازش می‌شود و همچنین، با تفاوت‌های واضح با سایر عناصر h2 در صفحه، عنصر h2 در sidebar نیز به طور خاص پردازش می‌شود.

انتخاب‌گرهای جداگانه

انتخاب‌گرهای id حتی اگر برای ایجاد انتخاب‌گرهای مشتق استفاده نشوند، می‌توانند به تنهایی عمل کنند:

#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

بر اساس این قانون، عنصر دارای id sidebar یک لبه‌ی نقطه‌ای سیاه به عرض یک پیکسل خواهد داشت و در عین حال یک م边际 داخلی به عرض 10 پیکسل خواهد داشت (padding، فضای داخلی). مرورگرهای قدیمی Windows/IE ممکن است این قانون را نادیده بگیرند مگر اینکه شما به طور خاص این انتخاب‌گر به عنصر مربوطه اختصاص دهید:

div#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

محتوای مرتبط

اگر می‌خواهید اطلاعات بیشتری در مورد انتخاب‌گرهای id بدست آورید، لطفاً آموزش‌های پیشرفته CodeW3C.com را بخوانید:تفصیلات انتخاب‌گرهای id CSS.