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

کدهای این بخش را از اینجا دانلود کنید.

آشنایی با سلکتورها (Selectors) در CSS

در این جلسه قصد داریم درباره سلکتورها (Selectors) صحبت کنیم. همان‌طور که پیش‌تر یاد گرفتیم، یک صفحه‌ی HTML ترکیبی است از المان‌های مختلف مانند:

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

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

انواع سلکتورها

سلکتورها در CSS بسیار متنوع هستند. برخی از پرکاربردترین آن‌ها عبارت‌اند از:

سلکتور نام تگ (Tag Selector)
کلاس (Class Selector)
آیدی (ID Selector)

معرفی فرمت سلکتورها

در CSS هر سلکتور با علامت خاصی مشخص می‌شود:

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

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

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

یک فایل HTML آماده کرده‌ایم که شامل تعدادی متن ساده است و در حال حاضر هیچ استایلی روی آن اعمال نشده است. خروجی اولیه آن چیزی شبیه به این خواهد بود

یکی از اولین روش‌های استایل‌دهی در CSS استفاده از استایل درون‌خطی (Inline Style) است. در این روش استایل مستقیماً داخل تگ HTML نوشته می‌شود.
برای مثال:

<h1 style="font-size: 70px;">This is Heading 1.</h1>

استایل درون‌خطی (Inline Style)
در این نمونه، اندازه فونت متن داخل پاراگراف برابر با ۷۰ پیکسل تنظیم شده است. بعد از ذخیره و رفرش کردن صفحه، خروجی نشان می‌دهد که متن پاراگراف بزرگ‌تر شده است. ما در این قسمت از روش‌ Internal استفاده خواهیم کرد. برای استفاده از این روش، کافی است در بخش <head> فایل HTML یک تگ <style> باز کنیم و استایل‌ها را درون آن بنویسیم.

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

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

* {
 background-color: red;
}

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

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

روش دوم، انتخاب المان‌ها بر اساس نام تگ HTML است. به‌عنوان مثال:

p {
 font-size: 14px;
}

h2 {
 font-size: 30px;
}

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

3.استفاده از کلاس‌ها (Class Selectors)

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

.sekan {
 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>

استفاده از کلاس‌ها (Class Selectors) دوره CSS

توضیحات مهم

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

4.استفاده از آیدی‌ها (ID Selectors)

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

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

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

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

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

نتیجه استفاده از آیدی‌ها (ID Selectors) دوره CSS

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

کلاس (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 دارند، پس‌زمینه‌ی یکسان (آبی) خواهند داشت.

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

مزیت این روش

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

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>

می‌بینیم که داخل مرورگر تغییری اعمال نشد. اما بررسی میکند که آیا پرنت این موضوع div a بوده است؟ ما اگر بیایم بنویسیم:

<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;
}

Child Selector (انتخابگر فرزند مستقیم) در دوره CSS

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

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

<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>

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

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

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

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

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

p, h1, h2, h3, h4 {font-family: Roboto;}
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.Adjacent Sibling Selector

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 قرار نگرفته است.

نکته پایانی جلسه

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