انتخاب کننده ها به صورت کلاس یا نشان گر (class, id selector)

ما انتخاب کننده های از نوع کلاس یا نشان گر را برای تعریف قوانینی استفاده می کنیم که فقط به یک قطعه انتخاب شده از کدهای اچ تی ام ال اعمال می شوند (قطعه ای که با استفاده از نام کلاس یا نشانگر – id – مشخص شده است). این نوع انتخاب کننده ها به ما این امکان را می دهند که یک عنصر خاص اچ تی ام ال، یا گروهی از عنصرها را انتخاب و سبک دهی کنیم بدون اینکه سایر نمونه های مربوط به آن عنصر را دستکاری کنیم.
انتخاب کننده از نوع کلاس (Class selector)
در این نوع انتخاب کننده (Selector) یک کلاس تعریف می کنیم و اعلان یا اعلان های مورد نظر خود را در داخل این کلاس می نویسیم. قوانین نوشته شده در داخل کلاس فقط به محتوای عناصری اعمال می شود که صفت کلاس (class attribute) در آنها هم نام با نام کلاس تعریف شده باشد. برای اسم گذاری این نوع انتخاب کننده، علامت نقطه (.) می گذاریم و پس از آن نام کلاس را می نویسیم. این نوع انتخاب کننده کلاس می توانید یک کلاس عمومی باشد که می توان قوانین آن را به تمام عناصر اچ تی ام ال اعمال کنیم.

/* می توان این کلاس را با همین نام مشخص شده 
به هر کدام از عناصر اچ تی ام ال نسبت داد */
.myClass{}

انتخاب کننده نوع کلاس را می توان به شیوه ای نوشت که قوانین شیوه نامه فقط به یک عنصر خاص از اچ تی ام ال نسبت داده شود؛ برای این کار ابتدا نام عنصر اچ تی ام ال مورد نظر خود را می نویسیم، سپس یک علامت نقطه (.) می گذاریم و پس از آن نام کلاس را می نویسیم. با این کار محتوای تمام عناصر مشابه داخل فایل (مثلا تمام عناصر پاراگراف که صفت کلاس در آنها با نام myClass مشخص شده است) بر اساس دستورات نوشته شده سبک دهی می شوند:

/* قوانین نوشته شده در این قسمت به محتوای همه عناصر 
پاراگراف که صفت آی دی آنها هم نام با این کلاس باشد اعمال خواهد شد. */
p.myClass {}

چند مثال در مورد استفاده از انتخاب کننده های کلاس
مثلا فرض کنید قسمتی از یک متن را که در داخل یک نوع خاص از عناصر اچ تی ام ال قرار دارد می خواهیم با رنگ خاصی مشخص کنیم اما نمی خواهیم تمام محتوای داخل سایر عناصر مشابه رنگشان تغییر کند. یعنی مثلا فرض کنید می خواهیم محتوای درون عنصر <p> را در مواردی با رنگ سبز مشخص کنیم ولی نمی خواهیم محتوای تمام عناصر <p> دارای رنگ سبز باشند؛ برای اینکار ابتدا یک کلاس عمومی (general class) با نام دلخواه خود ایجاد می کنیم:

.msg { color: green; }

قانون نوشته شده در بالا مشخص می کند هر عنصری که صفت کلاس (class attribute) در آن با مقدار msg مشخص شده باشد دارای چنین سبکی خواهد بود (رنگ متن آن سبز رنگ خواهد بود).

<p class=”green”>متن داخل این تگ ها دارای رنگ سبز خواهد بود.</p>

اما ما می توانیم یک کلاس ویژه هم تعریف کنیم (specific class)؛ در این حالت قانون نوشته شده در این نوع از کلاس فقط به همان عنصری که مشخص شده است اعمال می شود. یعنی اگر نام این کلاس را به عنصری غیر از عنصر مشخص شده نسبت دهیم، سبک دهی محتوای آن عنصر تغییری نخواهد کرد. این کار باعث می شود هر شخصی که شیوه نامه را مطالعه می کند به راحتی بفهمد که این دستور در کدام قسمت از محتوا اعمال می شود:

p.warn { color: red; }

برای اینکه یک کلاس ویژه را به یک عنصر نسبت دهیم، مثل کلاس های عمومی عمل می کنیم، البته مسلما کلاس ویژه فقط در مورد عنصری اعمال می شود که برای آن تعریف شده است.

<p class=”warn”>محتوای داخل این قسمت با رنگ قرمز مشخص می شود.</p>

شما می توانید بیشتر از یک کلاس را به یک عنصر نسبت دهید. برای این کار باید بین نام کلاس ها یک فاصله قرار دهید. این کار باعث می شود قابلیت تطبیق پذیری کلاس ها بسیار افزایش پیدا کند:

<p class="style1 style2"></p>

نکته: این مساله را در نظر داشته باشید که نباید نام کلاس با یک عدد شروع شود.
انتخاب کننده از نوع نشانگر id
انتخاب کننده از نوع نشانگر (id selector)برای سبک دهی یک عنصر خاص با نشانگر خاص استفاده می شود. در واقع قوانین نوشته شده در این نوع شیوه نامه، فقط به عنصری اعمال می شود که صفت id در داخل آن هم نام با این نوع انتخاب کننده باشد. و البته مسلما یک نشانگر در داخل یک فایل اچ تی ام ال باید منحصر به فرد باشد و از یک نام تکراری برای نشانگرهای مختلف استفاده نکنیم.

 
این نوع انتخاب کننده تا حدود زیادی شبیه به انتخاب کننده از نوع کلاس است، با این تفاوت که برای نامگذاری آن به جای علامت نقطه (.) از علامت پوند یا hash (#) استفاده می کنیم و نام این نوع انتخاب کننده در صفت id نوشته می شود در حالی که نام انتخاب کننده از نوع کلاس در داخل صفت class نوشته می شود. همانند انتخاب کننده از نوع کلاس، این نوع انتخاب کننده نیز یک نوع انتخاب کننده عمومی است که به صورت بالقوه می توان آن را به تمامی عناصر اچ تی ام ال اعمال کرد. این نوع از انتخاب کننده یک شناساگر منحصر به فرد (unique identifier) برای عنصر مربوط به خود در داخل سند تعریف می کند:

/*دستورات نوشته شده در این شیوه نامه به عنصری 
اعمال می شود که دارای صفت آی دی هم نام با این انتخاب کننده باشد */
#newid {}

مثل انتخاب کننده های نوع کلاس، می توان انتخاب کننده نوع نشانگر را نیز به نوعی تعریف کنیم که فقط به یک عنصر خاص اچ تی ام ال اعمال شود. با این وجود به خاطر اینکه فقط باید یک عنصر با یک آی دی خاص وجود داشته باشد، این ویژگی اضافی اغلب غیر ضروری به نظر می رسد و از لحاظ منطقی نیز نیازی به این کار نداریم.

/* دستورات این شیوه نامه به یک عنصر پاراگراف 
با صفت ای دی مشابه نام این انتخاب کننده اعمال می شود. */
p#newid {}

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

#err { color: red; }

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

<p id="err">محتوای این قسمت با رنگ قرمز مشخص می شود.</p>