انتخابگرهای ساده

مقدمه

در درس قبلی، یک معرفی گذرا از انواع انتخابگرهای CSS داشتیم و آنها را در چهار گروه قرار دادیم. در دروس باقیمانده‌ی این فصل، انتخابگرهای هر گروه را در یک درس بررسی می‌کنیم (البته گروه شبه‌انتخابگرها در دو درس پوشش داده می‌شوند که یکی به شبه‌کلاس‌ها و دیگری به شبه‌عنصرها اختصاص دارد). درس جاری به بررسی انتخابگرهای ساده (simple selectors) یعنی انتخابگرهای نوع، کلاس و id اختصاص دارد. یک انتخابگر خاص با نام انتخابگر universal نیز در این گروه وجود دارد که این درس را با معرفی آن به انتها می‌رسانیم.

انتخابگر نوع

یک انتخابگر نوع (type selector) برای انتخاب عناصر بر اساس نوع آنها کاربرد دارد و از این انتخابگر زمانی استفاده می‌کنیم که بخواهیم همه‌ی عناصر از یک نوع مشخص (مثلاً همه‌ی پاراگراف‌ها) را انتخاب کنیم. انتخابگر نوع که گاهی انتخابگر عنصر (element selector) یا انتخابگر تگ (tag selector) نیز نامیده می‌شود، دارای فرم کلی زیر است:

element {//styles}

به عنوان مثال، اگر قصد داشته باشیم ترتیبی دهیم که همه‌ی پاراگراف‌های صفحه با رنگ آبی و همه‌ی عناصر span صفحه با پس‌زمینه‌ی زرد نمایش داده شوند، به ترتیب زیر عمل می‌کنیم:

CSS

p{
  color: blue;
}

span{
  background-color: yellow;
}

انتخابگر کلاس

همانطور که می‌دانید، در HTML یک صفت عمومی یا سراسری (global attribute) با نام class وجود دارد که برای نشانه‌گذاری چند عنصر که به نوعی با هم مرتبط هستند، کاربرد دارد؛ یعنی عناصری را که به دلیل مشخصی با هم مرتبط هستند، تعیین کرده و مقدار یکسانی را به صفت class همه‌ی آنها اختصاص می‌دهیم و به این ترتیب، این عناصر در یک گروه یا کلاس قرار می‌گیرند.

با استفاده از یک انتخابگر کلاس (class selector) می‌توانیم عناصر موجود در یک کلاس یا گروه را انتخاب کنیم. برای ایجاد یک انتخابگر کلاس، باید از یک کاراکتر نقطه (full stop) و سپس مقدار صفت class استفاده کنیم. بنابراین، فرم کلی یک انتخابگر کلاس به صورت زیر است:

.class_name { //styles }

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

CSS

.highlight{
  background-color: yellow;
}

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

CSS

span.highlight{
  background-color: yellow;
}

دقت داشته باشید که بین نام یا نوع عنصر که در مثال بالا p است و کاراکتر نقطه فاصله‌ای وجود نداشته باشد؛ وجود فاصله بین این دو، معنای انتخابگر را تغییر می‌دهد و یک انتخابگر ترکیبی تولید می‌کند. به عبارت دیگر، کاراکتر فاصله (space) برای انتخابگرها یک ترکیب‌گر (combinator) محسوب می‌شود که در درس پایانی این فصل، به همراه سایر ترکیب‌گرها معرفی خواهد شد.

می‌دانیم که صفت class یک عنصر می‌تواند بیش از یک مقدار را دریافت کند که در این صورت، باید مقادیر را با کاراکتر space از هم جدا کنیم. بنابراین، یک عنصر می‌تواند به چندین کلاس متعلق باشد. کدهای HTML زیر را ببینید:

CSS

<div class="notebox">
  This is an informational note
</div>

<div class="notebox warning">
  This note shows a warning 
</div>

<div class="notebox danger">
  This note shows danger 
</div>

<div class="danger">
  This won't get styles 
</div>

در اینجا می‌خواهیم ترتیبی بدهیم که اگر عنصری دارای کلاس notebox باشد، با رنگ آبی نمایش داده شود اما در عین حال، اگر عنصری هم دارای کلاس notebox و هم دارای کلاس warning باشد، با رنگ نارنجی نمایش داده شود و چنانچه عنصری دارای کلاس‌های notebox و danger باشد، با رنگ قرمز نمایش داده شود. کدهای زیر این خواسته‌ها را برآورده می‌کند:

CSS

.notebox{
  color: blue;
}

.notebox.warning{
  color: orange;
}

.notebox.danger{
  color: red;
}

بنابراین، با به‌کارگیری انتخابگر کلاس به فرم .class1.class2 می‌توانیم عناصری را که هم دارای کلاس class1 و هم دارای کلاس class2 هستند، انتخاب کنیم. این قاعده را می‌توان برای بیش از دو نام کلاس نیز تعمیم داد.

انتخابگر id

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

برای استفاده از یک انتخابگر id کافیست از یک کارکتر پاوند (#) و سپس مقدار مورد نظر برای صفت id استفاده کنیم. بنابراین، انتخابگر id دارای فرم کلی زیر است:

#id_value {//styles}

برای مثال، در کد زیر از یک انتخابگر id برای انتخاب عنصری در صفحه که مقدار صفت id آن برابر با demo است، استفاده شده است:

CSS

#demo{
  padding: 25px;
}

در اغلب موارد، استفاده از انتخابگرهای کلاس به انتخابگرهای id ارجحیت دارد؛ زیرا انتخابگرهای کلاس، انعطاف‌پذیرتر بوده و از قابلیت استفاده‌ی مجدد (reusability) برخوردارند. از طرف دیگر، انتخابگرهای id معمولاً برای عناصر ساختاری یک وبسایت مانند #content و #footer استفاده می‌شوند و به نوعی منعکس‌کننده‌ی نقش منحصربه‌فرد این عناصر هستند.

انتخابگر Universal

انتخابگر universal با استفاده از یک کاراکتر ستاره (asterisk) ایجاد می‌شود و باعث انتخاب همه‌ی عناصر موجود می‌شود. فرم کلی این انتخابگر به صورت زیر است:

* {//styles}

در مثال زیر، از این انتخابگر برای حذف حاشیه (margin) برای تمام عناصر موجود در سند استفاده کرده‌ایم؛ این به این معناست که به جای استایل پیش‌فرض مرورگرها که معمولاً مقداری حاشیه برای عناصری مانند هدینگ‌ها و پاراگراف‌ها در نظر می‌گیرند، همه‌ی عناصر صفحه بدون هیچ حاشیه‌ای نمایش داده شوند:

*{
  margin: 0;
}

این ساده‌ترین فرم از انتخابگر universal است که همانطور که گفتیم، باعث می‌شود همه‌ی عناصر موجود در صفحه انتخاب شوند. اما این انتخابگر می‌تواند به همراه ترکیب‌گرها (combinators) با اهداف متفاوت به کار رود. برای مثال، انتخابگر div * به معنای انتخاب همه‌ی عناصر فرزند div است. در درس پایانی این فصل با انواع ترکیب‌گرها آشنا می‌شویم.