انتخاب‌گرها در CSS

هر قاعدهٔ CSS با یک انتخاب‌گر آغاز می‌شود. انتخاب‌گر پاسخ این پرسش است: «این استایل به کدام عنصرها برسد؟» هرچه این ابزار را دقیق‌تر بشناسید، کد کمتری می‌نویسید و برای تغییرها دست‌یازیدن به HTML لازم نیست. در این درس انتخاب‌گرهای پایه و ترکیبی و شبه‌کلاس‌ها را می‌آموزید و در پایان، منطقی را یاد می‌گیرید که تصمیم می‌گیرد وقتی چند قاعده روی یک عنصر جمع شده‌اند، کدام‌یک برنده شود.

انتخاب‌گرهای پایه

سه انتخاب‌گر پایه دارید: انتخاب‌گر عنصر که همهٔ نمونه‌های آن تگ را می‌گیرد؛ کلاس که با نقطه نوشته می‌شود و هر عنصری که در HTML آن کلاس را داشته باشد؛ و شناسه (ID) که با علامت # نوشته می‌شود و عنصری با همان id را می‌گیرد:

p { line-height: 1.8; }
.card { border: 1px solid gray; }
#header { background: darkslateblue; }

<p>An ordinary paragraph.</p>
<div class="card">First card</div>
<div class="card">Second card</div>
<header id="header">Site header</header>

کلاس پرکاربردترین ابزار شماست، چون می‌تواند روی هر عنصری بنشیند و روی یک عنصر هم می‌توان چند کلاس گذاشت:

<div class="card featured">Featured card</div>

برای اعمال یک استایل مشترک روی چند انتخاب‌گر، آن‌ها را با کاما گروه کنید:

h1,
h2 {
  font-weight: 700;
}

روابط خانوادگی: نسل و فرزند

انتخاب‌گرها می‌توانند رابطهٔ عنصرها را هم در نظر بگیرند. فاصله میان دو انتخاب‌گر یعنی «نسل»: عنصر دوم هر جا در درون عنصر اول بود، هرچقدر هم عمیق. علامت بزرگ‌تر یعنی «فرزند مستقیم»: فقط یک سطح پایین‌تر:

nav a { color: white; }       /* any link inside nav, however deep */
.menu > li { padding: 8px; }  /* only direct li children of .menu */

فرق این دو در فهرست‌های تو در تو مشخص می‌شود. اگر فهرست داخلی داشته باشید، nav a به پیوندهای آن هم می‌رسد، اما .menu > li به موارد فهرست داخلی نمی‌رسد چون فرزند مستقیم نیستند.

انتخاب با ویژگی

عنصرها را می‌توان بر اساس وجود یا مقدار یک ویژگی هم انتخاب کرد. این الگو برای فرم‌ها به‌شدت کاربردی است:

input[type="checkbox"] {
  accent-color: darkslateblue;
}

a[target="_blank"] {
  font-weight: 700;
}

شبه‌کلاس‌ها

شبه‌کلاس (Pseudo-class) با دونقطه نوشته می‌شود و حالت‌های خاص یک عنصر را انتخاب می‌کند؛ بدون آنکه لازم باشد HTML را دست‌کاری کنید. پرکاربردترین‌ها:

a:hover {
  text-decoration: underline;
}

input:focus {
  outline: 2px solid steelblue;
}

li:first-child {
  font-weight: 700;
}

tr:nth-child(odd) {
  background: gainsboro;
}

شبه‌کلاس hover یعنی نشانگر ماوس روی عنصر است و focus یعنی ورودی فعال شده و منتظر تایپ است، first-child نخستین فرزند والد را می‌گیرد و nth-child(odd) موارد فرد را؛ همان راه سادهٔ راه‌راه کردن جدول‌ها. شبه‌کلاس‌ها را می‌توان به بقیهٔ انتخاب‌گرها چسباند: .menu a:hover فقط پیوندهای داخل منو را در حالت نگه‌داشتن ماوس تغییر می‌دهد.

سرشکنی: کدام قاعده برنده است؟

در درس پیش دیدید که آبشار با ترتیب وزن قواعد کار می‌کند. به این وزن‌دهی «سرشکنی» (Specificity) می‌گویند و فرمول آن ساده است: هر قاعده سه شمارنده دارد؛ تعداد شناسه‌ها، تعداد کلاس‌ها و شبه‌کلاس‌ها، و تعداد انتخاب‌گرهای عنصر. مقایسه از چپ به راست انجام می‌شود:

p { color: gray; }          /* element */
.note { color: navy; }      /* class: beats element */
main .note { color: teal; } /* class + element: beats .note */
#intro { color: black; }    /* id: beats them all */

پاراگرافی که id="intro" و کلاس note دارد و داخل main است، سیاه می‌شود؛ چون شناسه یک بار هم بیاید، همهٔ ترکیب‌های کلاس و عنصر را می‌برد. اگر دو قاعده دقیقاً هم‌وزن باشند، قاعدهٔ پایین‌تر در فایل برنده است.

تمرین‌ها

<ul class="menu">
  <li><a href="/">Home</a></li>
  <li><a href="/courses">Courses</a></li>
  <li><a href="/about">About Us</a></li>
</ul>

/* Write your code here */

.menu a {
  text-decoration: none;
}

.menu a:hover {
  text-decoration: underline;
}

.menu li:last-child {
  font-weight: 700;
}

:::

خلاصه

• انتخاب‌گر عنصر همهٔ نمونه‌های تگ، کلاس با نقطه گروه‌های دلخواه و شناسه با # یک عنصر یکتا را می‌گیرد.
• فاصله میان انتخاب‌گرها یعنی نسل در هر عمقی و علامت بزرگ‌تر یعنی فرزند مستقیم.
• انتخاب‌گر ویژگی مثل input[type="checkbox"] بر اساس صفت‌های HTML انتخاب می‌کند.
• شبه‌کلاس‌ها حالت‌ها را می‌گیرند؛ hover و focus و first-child و nth-child پرکاربردترین‌ها هستند.
• سرشکنی با سه شمارندهٔ شناسه و کلاس و عنصر خوانده می‌شود؛ برای استایل از کلاس به‌جای شناسه استفاده کنید.

الان می‌دانید کدام عناصر را انتخاب می‌کنید؛ در درس بعدی می‌بینید هر عنصر در واقع چه شکلی است: مدل جعبه‌ای.