سلکتور (Selector) در CSS چیست و چطور کار میکند؟
صفحهای که ساختهای هزار عنصر دارد: تیترها، پاراگرافها، دکمهها، لینکها. حالا میخواهی فقط یکیشان قرمز شود. چطور به CSS بگویی «همان یکی، نه بقیه»؟
جوابِ این سؤال دقیقاً همان چیزی است که اسمش سلکتور است. سلکتور یعنی «انتخابگر»: نیمهٔ اولِ هر قاعدهٔ CSS، که مشخص میکند نیمهٔ دوم — استایلها — روی سرِ چه کسی خراب شود.
button { color: red; }
این قاعده دو تکه دارد. تکهٔ داخل آکولاد میگوید «چه بشود» (رنگ قرمز). و button که پشتِ در ایستاده، میگوید «برای چه کسی» — برای هر دکمهای که در صفحه هست. آن تکهٔ پشتِ در، سلکتور است.
سلکتور نشانیِ عنصر است، نه اسمِ استایل. CSS هیچوقت نمیپرسد «چه چیزی را عوض کنم؟» و بعد «چطور؟» — هر دو را با هم در یک قاعده میگیرد: نشانی + تغییر.
سه سلکتور پایه که ۹۰٪ کارها را انجام میدهند
۱. سلکتور تگ — اسمِ خودِ عنصر را مینویسی و همهٔ همنوعهایش انتخاب میشوند:
p { line-height: 1.8; }
یعنی «همهٔ پاراگرافها». ساده و پرزور — گاهی زیادی پرزور، چون شاید نخواهی همهٔ پاراگرافها تغییر کنند.
۲. سلکتور کلاس — با نقطه شروع میشود و فقط عنصرهایی را میگیرد که آن کلاس را دارند:
.warning { color: orange; }
این یعنی «هر عنصری که در HTML نوشته باشد class="warning"». کلاس مثل برچسبی است که خودت روی عنصرها میچسبانی: به هر تعداد عنصر که بخواهی، از هر نوعی که باشند. برای همین کلاس پرکاربردترین سلکتور دنیای واقعی است — تقریباً همهٔ CSSهای حرفهای با کلاس کار میکنند.
۳. سلکتور شناسه (id) — با # شروع میشود و فقط یک عنصرِ مشخص را میگیرد:
#site-logo { width: 120px; }
شناسه در هر صفحه باید یکتا باشد — یعنی این سلکتور همیشه حداکثر یک نفر را صدا میزند.
| میخواهی… | سلکتور | مثال |
|---|---|---|
| همهٔ عنصرهای یک نوع | تگ | h2 |
| گروهی که خودت برچسب زدهای | کلاس | .card |
| دقیقاً یک عنصر یکتا | شناسه | #menu |
ترکیبکردن: سلکتورها جمله میسازند
قدرت واقعی از کنار هم گذاشتنِ همینهاست. یک فاصلهٔ ساده بین دو سلکتور یعنی «داخلِ»:
.card p { margin: 0; }
بخوانش از راست به چپِ معنا: «پاراگرافهایی که داخلِ عنصری با کلاس card هستند.» پاراگرافهای بیرونِ کارتها دستنخورده میمانند. به این میگویند سلکتور نسلی (descendant) و پرکاربردترین ترکیب است.
چند ترکیب آشنای دیگر:
| سلکتور | یعنی |
|---|---|
button.primary |
دکمهای که کلاس primary هم دارد (بدون فاصله!) |
.menu a |
لینکهای داخل منو |
h2, h3 |
همهٔ h2ها و همهٔ h3ها (ویرگول یعنی «و») |
آن نکتهٔ بدونِ فاصله را جدی بگیر: button.primary با button .primary دو دنیای متفاوتاند. اولی یک عنصر است که هر دو شرط را دارد؛ دومی عنصری با کلاس primary که داخلِ یک دکمه است.
حالتها: وقتی «کی» هم مهم میشود
گاهی سؤال فقط «کدام عنصر» نیست، «در چه حالتی» هم هست. شبهکلاسها همین را میگویند و با دونقطه میآیند:
a:hover { text-decoration: underline; }
یعنی «لینک، وقتی موس رویش است.» چند تای پرکاربرد: :hover (موس روی عنصر)، :focus (عنصرِ فعالِ صفحهکلید — برای دسترسپذیری حیاتی است)، :first-child (اولین فرزند والدش).
وقتی دو قاعده با هم دعوا میکنند
دیر یا زود دو سلکتور به یک عنصر میرسند و دو رنگِ متفاوت میخواهند. برنده را قدرتِ سلکتور تعیین میکند — id از کلاس قویتر است و کلاس از تگ. این ماجرا آنقدر مهم است که یک نوشتهٔ کامل دارد: چرا این CSS اعمال نمیشود؟ cascade و specificity. اگر تازه با سلکتورها آشنا شدهای، آن نوشته قدمِ منطقیِ بعدی است.
کجا تمرینش کنی
سلکتور چیزی نیست که با خواندن در ذهن بنشیند — باید ببینی که با تغییر یک نقطه، کدام عنصرها رنگ عوض میکنند. در آزمایشگاه یادستان میتوانی HTML و CSS را کنار هم بنویسی و نتیجه را همان لحظه ببینی، و اگر میخواهی از پایه و مرتب جلو بروی، دورهٔ تاروپود از اولین تگ HTML تا ساخت صفحهٔ کامل همین مسیر را قدمبهقدم میرود — از جمله یک فصل کامل دربارهٔ همین سلکتورها.
جمعبندی در یک خط: CSS بدون سلکتور فقط فهرستی از آرزوهاست؛ سلکتور است که میگوید هر آرزو مالِ کیست.
