سلکتورها یا انتخابگرها در CSS

انتخابگرها یا سلکتورها در CSS، ابزاری برای انتخاب المان‌های HTML و اعمال استایل‌ها و ویژگی‌ها به آن‌ها هستند. این سلکتورها بسیار متنوع هستند؛ در واقع بیش از ۵۰ نوع، سلکتور مختلف برای انتخاب المان‌ها در CSS وجود دارد. با این حال، در پروژه‌های عملی، چند نوع رایج و پرکاربرد بیش از بقیه مورد استفاده قرار می‌گیرند. در این قسمت رایگان از دوره آموزش کاربردی CSS کار با انواع سلکتورهای رایج را به خوبی یاد می گیرید.

سلکتور در CSS چیست؟

همان‌طور که پیش‌تر در دوره آموزش رایگان HTML یاد گرفتید، یک صفحه‌ی HTML ترکیبی است از المان‌های مختلف مانند:

پاراگراف‌ها (<p>)
هدینگ‌ها (<h1>, <h2>, …)
لینک‌ها (<a>)
تصاویر (<img>)
دیوها (<div>)
و سایر تگ‌ها

حال اگر بخواهیم یک استایل خاص را روی المان مشخصی مثل پاراگراف، لینک یا هدینگ اعمال کنیم، نیاز داریم ابتدا آن المان را انتخاب کنیم. این کار توسط سلکتورها انجام می‌شود. مهم‌ترین و پرکاربردترین سلکتورهای مورد استفاده، آیدی (ID Selector)، کلاس (Class Selector) و تگ‌ها (Tag Selector) هستند.

کلاس (Class) در CSS با نقطه (.) شروع می‌شود و می‌تواند مربوط به گروهی از المان‌های HTML باشد.
آیدی (ID) در CSS با علامت هشتگ (#) یا همان نامبرساین/شارپ آغاز می‌شود که یک المان یا عنصر را نشانه می‌گیرد.
در قسمت بعد به طور دقیق‌تر با تفاوت این دو سلکتور آشنا می‌شوید و یاد می‌گیرید که در کجا از کدامیک استفاده کنید.

شروع کار در محیط پروژه

یک فایل HTML آماده کرده‌ایم که شامل تعدادی متن ساده است و در حال حاضر هیچ استایلی روی آن اعمال نشده است. خروجی اولیه آن چیزی شبیه به این خواهد بود:
نمایش فایل HTML
همان‌طور که در قسمت اول از این دوره با عنوانِ اضافه کردن CSS به HTML یاد گرفتید، یکی از روش‌های اعمال استایل‌های CSS به المان‌های HTML استفاده از استایل داخلی (Internal Style) است. ما نیز در این قسمت از روش‌ Internal استفاده می‌کنیم. برای استفاده از این روش، کافی است در بخش <head> فایل HTML یک تگ <style> باز کنید و استایل‌ها را درون آن بنویسید.

1. سلکتور سراسری (Universal Selector)

اولین نوع سلکتور که می‌توانید استفاده کنید ستاره * است. این سلکتور تمام تگ‌های موجود در HTML را انتخاب می‌کند و استایل مشخص‌شده را روی همه آن‌ها اعمال می‌کند.

* {
 background-color: red;
}

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

نتیجه سلکتور ستاره یا سراسری (Universal Selector)

2. سلکتور نام تگ (Tag Selector)

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

p {
 font-size: 14px;
}

h2 {
 font-size: 30px;
}

3. سلکتور کلاس (Class Selectors)

کلاس‌ها یکی از پرکاربردترین سلکتورها در CSS هستند. برای تعریف یک کلاس کافی است در فایل CSS نام دلخواهی انتخاب کنید و آن را با نقطه (.) مشخص کنید:

.sokan {
 font-size: 10px;
 color: blue;
 text-decoration: underline;
}

سپس در فایل HTML می‌توانید این کلاس را به هر تعداد المان دلخواه اختصاص دهید:

<div>
  <p class="sokan">This is paragraph A and some text to make it longer.</p>
  <p class="sokan">This is Paragraph C and some text to make it longer.</p>
</div>

اعمال انتخابگر یا همان سلکتور کلاس در css بر دو پاراگراف

توضیحات مهم

در بخش CSS، نقطه . قبل از نام کلاس به مرورگر اعلام می‌کند که این یک کلاس است.
در بخش HTML، تنها کافی است ویژگی class="..."n را داخل تگ بنویسیم (بدون نقطه).
یک کلاس می‌تواند بارها و بارها برای عناصر مختلف استفاده شود. این کار باعث می‌شود کدها کوتاه‌تر و قابل مدیریت‌تر باشند.

4. سلکتور آیدی (ID Selector)

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

 <h1 id="main-title">This is Heading 1.</h1>

برای انتخاب آیدی در CSS، از علامت # قبل از نام آن استفاده کنید:

#mainTitle {
 color: red;
 font-size: 18px;
}

در این مثال، استایل فقط روی عنصر h1 با آیدی mainTitle اعمال می‌شود.

تفاوت کلاس و آیدی:

کلاس (class): می‌تواند روی چندین عنصر مختلف اعمال شود.
آیدی (id): تنها برای یک عنصر خاص در صفحه استفاده می‌شود.

(توضیحات کامل تفاوت‌ها را قسمت بعد بررسی می‌کنیم.)

5. سلکتورهای ترکیبی

گاهی نیاز داریم یک کلاس فقط روی تگ خاصی اعمال شود. در این حالت باید ترکیب نام تگ و کلاس را بنویسید:

p.academy {
 color: yellowgreen;
}

h2.academy {
 color: brown;
}

در خط اول هر تگی که پاراگراف (p) باشد و کلاس academy. داشته باشد، رنگش زرد-سبز شود.
در خط دوم گفتیم: هر تگی که h2 باشد و کلاس academy. داشته باشد، رنگش قهوه‌ای شود.

<h2 class="academy">This is Heading 2</h2>
<p class="academy">This is paragraph B and some text to make it longer.</p>

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

6. گروه‌بندی سلکتورها (Group Selectors)

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

.academy, .sokan {
  background-color: aqua;
}

<p class="sokan">This is paragraph A and some text to make it longer.</p>
<h2 class="academy">This is Heading 2</h2>
<p class="academy">This is paragraph B and some text to make it longer.</p>

همه تگ‌هایی که کلاس academy یا sekan دارند، پس‌زمینه‌ی یکسان (آبی) خواهند داشت.

مزیت گروه‌بندی سلکتورها

صرفه‌جویی در نوشتن کد
جلوگیری از تکرار دستورات
نگهداری و ویرایش ساده‌تر استایل‌ها

7.سلکتورهای تو در تو (Descendant Selectors)

در CSS می‌توانیم مشخص کنیم که یک استایل فقط در صورتی روی یک عنصر اعمال شود که آن عنصر داخل یک والد (Parent) خاص قرار گرفته باشد. این روش به ما امکان می‌دهد کنترل دقیق‌تری روی استایل عناصر داشته باشیم.

به عنوان مثال:

.divA .pD {
  font-size: 40px;
}

<div>
  <p class="pD">This is paragraph D inside a div tag. <span>And this is a span</span></p>
</div>

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

<div class="divA" >
  <p class="pD">This is paragraph D inside a div tag. <span>And this is a span</span></p>
</div>

اتفاقی که می‌افتد:

سلکتورهای تو در تو (Descendant Selectors) در CSS

چون پرنت را چک می‌کند.

مثال بعدی:

.divA .spanA {
  color: purple;
}

نتیجه می‌شود:

8. سلکتور فرزند مستقیم (Child Selector)

در CSS می‌توانید مشخص کنید که یک استایل فقط روی فرزند مستقیم یک والد مشخص اعمال شود. برای این کار از علامت < استفاده می‌شود، به جای فاصله (Space) که در Descendant Selector استفاده شد.

.divA > .spanA {
  color: purple;
}

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

ام اگر در اینجا بنویسید:

<div class="divA">
    <span class="spanA">This ia span tag A.</span>
</div>

می‌بینید که رنگ آن تغییر پیدا کرد:

9. سلکتور همسایه مجاور (Adjacent Sibling Selector)

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

.headingB {
  font-size: 55px;
}

.SallarRabiei {
  color: green;
}

و برای هرکدام هدینگ و پاراگراف می‌نویسیم:

<h2 class="headingB">This is Heading B</h2>
<p class="SallarRabiei">This is Paragraph C and some text to make it longer.</p>

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

.headingB + .SallarRabiei {
  border: 10px solid black;
}

و نتیجه می‌شود:

10. Group Selector برای چندین المان

گاهی نیاز داریم یک استایل روی چند تگ مختلف اعمال شود، بدون اینکه برای هر تگ یک بلاک CSS جداگانه بنویسیم. برای این کار می‌توانیم از کاما (,) استفاده کنیم.

p {font-family: Roboto;}
h1 {font-family: Roboto;}
h2 {font-family: Roboto;}
h3 {font-family: Roboto;}
h4 {font-family: Roboto;}

ما به جای اینکه پنج خط کد بنویسیم می‌توانیم با استفاده از کاما، font-family: Roboto روی همه این‌ها اعمال کنیم:

p, h1, h2, h3, h4, h5, h6, span, li, ul, ol {
font-family: Roboto;
}

11. سلکتورهای داخلی تو در تو

این دستور به مرورگر می‌گوید که تمام لینک‌هایی که داخل یک <div> هستند را انتخاب کن و استایل مشخص‌شده را روی آن‌ها اعمال کن:

div a {
  text-decoration: none;
  color: red;
}

یعنی در هرجایی که تگ a داخل تگ div بود این تغییرات را روش اعمال کن. بعد از رفرش کردن میبینیم که:
سلکتورهای داخلی تو در تو در css
که هر دو جمله تغییر کردن چون هردو داخل تگ <a> قرار دارند.

12. سلکتور فرزند مستقیم تگ

div > span {
  text-decoration: underl ine;
  color: brown;
}

یعنی این تغییرات را بلافاصله روی span هایی که بعد div هستند اعمال کن که می‌شود:

<div>
  <span>This ia span tag B.</span>
</div>
<div>
  <p>This is paragraph F inside a div tag. <span class="spanA"></span>And this is a span</p>
</div>

اسپن اول داخل div قرار دارد → استایل اعمال می‌شود.
اسپن دوم داخل پاراگراف قرار دارد → استایل اعمال نمی‌شود.

13. Heading و پاراگراف

در اینجا می‌نویسیم که:

h3 + p {
  text-align: center;
}

<div>
  <h3>This is heading 3</h3>
  <p>This is paragraph G inside a div tag. <a href="#" target="_blank"></a>And this is link B</p>
</div>

این استایل فقط روی پاراگراف‌هایی اعمال می‌شود که بلافاصله بعد از h3 قرار گرفته است.

ما اگر بیایم که این جمله رو چندبار کپی کنیم می‌بینیم که:

<div>
  <h3>This is heading 3</h3>
  <p>This is paragraph G inside a div tag. <a href="#" target="_blank"></a>And this is link B</p>
  <p>This is paragraph H inside a div tag. <a href="#" target="_blank"></a>And this is link B</p>
  <p>This is paragraph I inside a div tag. <a href="#" target="_blank"></a>And this is link B</p>
</div>

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

جمع‌بندی و نکته پایانی

در این قسمت، ۱۳ سلکتور در CSS (انتخابگر در CSS) را یاد گرفتید. بسیاری از این ۱۳ سلکتور می‌توانند در پروژه‌های واقعی ترکیب شوند تا کد خوانا، کوتاه و منعطف باقی بماند. سعی کن با تمرین و تست آنها برای تگ‌های مختلف، نتایج آنها را مشاهده و بر آنها مسلط شوید

در قسمت بعدی، تفاوت کلاس و آیدی و انتخاب مناسب آن‌ها در پروژه‌ها را آموزش می‌بینید.

انواع انتخابگرها (selectors) و ترکیبات آن