آموزش سلکتور آی دی(ID) در CSS

سلکتور ID از برخی جهات مشابه با سلکتور calss است؛ اما این دو تفاوت های مهمی با یکدیگر دارند. سلکتورهای ID به جای یک نقطه، با یک علامت هشتگ (#) شروع می شوند؛ بنابراین می توانیم یک دستور مانند زیر تعریف کنیم:

#first-para {font-weight: bold;}

این دستور متن هر عنصری که خصوصیت id آن برابر با first-para باشد، را به صورت برجسته(bold) نشان می دهد.

در کدهای زیر، یک مثال از سلکتور id وجود دارد:

#lead-para {font-weight: bold;}

<p id="lead-para">This paragraph will be boldfaced.</p>
<p>This paragraph will NOT be bold.</p>

ما می توانیم آی دی lead-para را به هر عنصر یکتا در درون سند انتساب دهیم. در کدهای بالا، آی دی lead-para به اولین پاراگراف اعمال شده است.

بعنوان مثال، فرض کنید در یک سند، id یک عنصر برابر با mostImportant باشد. اما ما نمی دانیم که این id به کدام عنصر تعلق دارد. مثلاً یک پاراگراف یا یک لیست یا یک عنوان یا غیره. تنها می دانیم که این id در سند وجود دارد و در یک عنصر دلخواه قرار دارد و بیش از یک بار در کدها ظاهر نشده است.

در این صورت، می توانیم یک دستور مانند زیر را بنویسیم:

#mostImportant {color: red; background: yellow;}

دستور بالا می تواند به صورت جداگانه با هریک از مثال های زیر تطابق یابد. اما همان طور که گفته شد، در داخل یک سند، یک id نباید به بیش از یک عنصر اختصاص داده شود:

<h1 id="mostImportant">This is important!</h1>
<em id="mostImportant">This is important!</em>
<ul id="mostImportant">This is important!</ul>

نکته پایانی: وقتی که بخواهیم یک عنصر را با صورت یکتا مشخص کنیم و کدهای CSS را به آن اعمال کنیم، می توانیم از سلکتور id استفاده کنیم. اما اگر بخواهیم کدهای CSS را به یک یا چند عنصر اعمال کنیم، می توانیم از یک سلکتور class استفاده کنیم.