معرفی انتخابگرهای CSS

آموزش CSS

مقدمه

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

انواع انتخابگرهای CSS

همانطور که گفتیم، چندین نوع مختلف از انتخابگرهای CSS وجود دارد که هر کدام از آنها کار انتخاب عناصر را به شکل متفاوتی انجام می‌دهد. انتخابگرها را می‌توان در چهار گروه زیر طبقه‌بندی کرد:

  • انتخابگرهای ساده یا simple selectors: انتخابگرهای نوع، کلاس، id و یک انتخابگر خاص با نام universal در این گروه قرار دارند. انتخابگرهای نوع، کار انتخاب را بر اساس نام یا نوع عناصر انجام می‌دهند، انتخابگرهای کلاس و id عناصر را بر اساس مقدار صفت‌های class و id آنها انتخاب می‌کنند و انتخابگر universal باعث انتخاب همه‌ی عناصر می‌شود.
  • انتخابگرهای صفت یا attribute selectors: این گروه از انتخابگرها کار انتخاب عناصر را بر اساس صفت‌های عناصر و مقدار آنها انجام می‌دهند. با استفاده از این انتخابگرها، می‌توانیم از مرورگر بخواهیم عناصری را که دارای صفتی مثل x هستند و یا مقداری مثل y را به صفت x اختصاص داده‌اند، انتخاب کند.
  • شبه‌انتخابگرها یا pseudo-selectors: انتخابگرهای شبه‌کلاس (pseudo-class) و شبه‌عنصر (pseudo-element) در این گروه قرار دارند. شبه‌کلاس‌ها کار انتخاب عناصر را بر اساس وضعیت عناصر انجام می‌دهند و شبه‌عنصرها انتخابگرهایی هستند که به جای انتخاب یک عنصر، بخشی از عنصر را انتخاب می‌کنند.
  • ترکیب‌گرها یا combinators: از ترکیب‌گرها برای ترکیب انتخابگرها و ایجاد انتخابگرهای پیچیده‌تر استفاده می‌شود. در اینجا موضوع کلیدی، رابطه‌ی بین عناصر است و هر ترکیب‌گر، نوع خاصی از رابطه را هدف قرار می‌دهد.

جدول زیر حاوی لیستی از انتخابگرهای CSS است:

گروه انتخابگرها نام انتخابگر مثال توضیح مثال
انتخابگرهای ساده Universal * { } همه‌ی عناصر صفحه انتخاب می‌شوند.
Element (Type) h1 { } همه‌ی عناصر h1 موجود در صفحه انتخاب می‌شوند.
Class .box { } هر عنصری که صفت class آن عنصر دارای مقدار box باشد، انتخاب می‌شود.
Id #intro { } عنصری که صفت id آن دارای مقدار intro باشد، انتخاب می‌شود.
انتخابگرهای صفت Attribute a[title] {} هر عنصر a که دارای صفت title باشد، انتخاب می‌شود.
شبه‌انتخابگرها Pseudo-class p:firs-child { } هر عنصر از نوع p که اولین فرزند عنصر والد خود باشد، انتخاب می‌شود.
Pseudo-element p::first-line { } اولین خط از هر عنصر p انتخاب می‌شود.
ترکیب‌گرها Decendant div p { } هر عنصر p در صفحه که فرزند مستقیم یا عیرمستقیم یک عنصر div است، انتخاب می‌شود.
Child div>p { } هر عنصر p در صفحه که فرزند مستقیم یک عنصر div است، انتخاب می‌شود.
Adjacent sibling h1+p { } هر عنصر p که بلافاصله بعد از یک عنصر h1 قرار داشته باشد، انتخاب می‌شود (به شرط مشترک بودن والد دو عنصر).
General sibling h1~p { } هر عنصر p که بعد از یک عنصر h1 قرار داشته باشد، انتخاب می‌شود (به شرط مشترک بودن والد دو عنصر).

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

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

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

selector_1, elector_2, …, selector_n { styles }

در مثال زیر، دو قاعده داریم که استایل‌های یکسانی را روی عناصر از نوع h1 و p اعمال می‌کنند:

h1{
  color: green;
  font-family: arial;
}

p{
  color: green;
  font-family: arial;
}

برای حفظ اختصار کدها، بهتر است این دو قاعده را به صورت زیر با هم ترکیب کنیم:

h1, p{
  color: green;
  font-family: arial;
}