Selectorها در CSS

بهنام نوبخت · ۱۴۰۵/۶/۲۸

تا اینجا یاد گرفتیم که CSS برای تغییر ظاهر عناصر HTML استفاده می‌شود؛ اما یک سؤال بسیار مهم باقی می‌ماند: CSS از کجا می‌فهمد کدام عنصر HTML را باید تغییر دهد؟ پاسخ این سؤال در مفهوم Selector یا «انتخاب‌گر» قرار دارد. Selector به مرورگر می‌گوید یک قانون CSS باید روی کدام عنصر یا مجموعه‌ای از عناصر اعمال شود. برای مثال، وقتی می‌نویسیم p، مرورگر تمام عناصر <p> را هدف قرار می‌دهد و وقتی .title را می‌نویسیم، عناصری را انتخاب می‌کند که کلاس title دارند. Selectorها یکی از پایه‌ای‌ترین مفاهیم CSS هستند و تقریباً تمام مباحث بعدی CSS، از طراحی ساده گرفته تا ساخت رابط‌های کاربری پیچیده، به آن‌ها وابسته است.

در این مقاله ابتدا Selector را به زبان ساده می‌شناسیم، سپس با Type Selector، Class Selector، ID Selector، Universal Selector و Selector List کار می‌کنیم و در ادامه ترکیب چند Selector را یاد می‌گیریم. در پایان نیز یک پروژه عملی خواهیم داشت.

Selector چیست؟

به این قانون CSS توجه کنید:

h1 {
    color: orange;
}

قسمت:

h1

یک Selector است.

این Selector به مرورگر می‌گوید:

تمام عناصر <h1> را پیدا کن و قوانین داخل {} را روی آن‌ها اعمال کن.

در نتیجه:

<h1>عنوان سایت</h1>

با قانون بالا نارنجی می‌شود.

به‌طور کلی ساختار یک قانون CSS به شکل زیر است:

selector {
    property: value;
}

مثلاً:

p {
    color: blue;
}

در این مثال:

بخش	مفهوم
`p`	Selector
`color`	Property
`blue`	Value

Selector مشخص می‌کند چه چیزی انتخاب شود و Property و Value مشخص می‌کنند چه تغییری روی آن انجام شود.

چرا Selectorها مهم هستند؟

فرض کنید یک صفحه HTML داریم:

<h1>عنوان اصلی</h1>

<h2>عنوان فرعی</h2>

<p>متن اول</p>

<p>متن دوم</p>

<button>ثبت</button>

اگر بنویسیم:

p {
    color: red;
}

فقط پاراگراف‌ها قرمز می‌شوند.

اگر بنویسیم:

h1 {
    color: blue;
}

فقط عنوان اصلی تغییر می‌کند.

اگر بنویسیم:

button {
    background-color: green;
}

فقط دکمه تحت تأثیر قرار می‌گیرد.

پس Selectorها ابزار اصلی ما برای هدف‌گیری عناصر HTML هستند.

انواع Selector در CSS

Selectorهای زیادی در CSS وجود دارند، اما در این مرحله ابتدا با Selectorهای پایه کار می‌کنیم.

مهم‌ترین موارد عبارت‌اند از:

در مقالات بعدی با Selectorهای Attribute، Pseudo-Class، Pseudo-Element و Combinatorها نیز آشنا خواهیم شد.

Type Selector

ساده‌ترین نوع Selector، انتخاب عنصر بر اساس نام تگ HTML است.

برای مثال:

p {
    color: #555;
}

در اینجا:

یک Type Selector است.

این Selector تمام عناصر <p> موجود در صفحه را انتخاب می‌کند.

مثلاً:

<p>متن اول</p>

<p>متن دوم</p>

<p>متن سوم</p>

با این CSS:

p {
    color: red;
}

هر سه پاراگراف قرمز می‌شوند.

مثال‌های Type Selector

برای عنوان:

h1 {
    color: orange;
}

برای لینک‌ها:

a {
    color: blue;
}

برای دکمه‌ها:

button {
    background-color: black;
}

برای تصاویر:

img {
    width: 300px;
}

برای لیست‌ها:

li {
    margin-bottom: 10px;
}

نکته مهم درباره Type Selector

وقتی از Type Selector استفاده می‌کنیم، تمام عناصر آن نوع انتخاب می‌شوند.

مثلاً:

p {
    color: red;
}

تمام <p>های صفحه را انتخاب می‌کند.

اگر ۵۰ پاراگراف داشته باشیم، هر ۵۰ پاراگراف تحت تأثیر این قانون قرار می‌گیرند.

این موضوع در بعضی مواقع بسیار مفید است، اما همیشه نمی‌خواهیم تمام عناصر یک نوع را تغییر دهیم.

برای همین Class Selector اهمیت زیادی پیدا می‌کند.

Class Selector

یکی از پرکاربردترین Selectorها در CSS، Class Selector است.

فرض کنید در HTML داریم:

<p class="important">
    این یک متن مهم است.
</p>

برای انتخاب این عنصر بر اساس کلاس، در CSS قبل از نام کلاس یک نقطه . قرار می‌دهیم:

.important {
    color: red;
}

یعنی:

.important
   ↑
 علامت کلاس

Class Selector تمام عناصری را که آن کلاس را دارند انتخاب می‌کند.

یک کلاس می‌تواند روی چند عنصر استفاده شود

برای مثال:

<h2 class="important">
    عنوان مهم
</h2>

<p class="important">
    متن مهم
</p>

<span class="important">
    عبارت مهم
</span>

CSS:

.important {
    color: red;
}

هر سه عنصر انتخاب می‌شوند.

این یکی از تفاوت‌های مهم Class و ID است که کمی جلوتر بررسی خواهیم کرد.

نام‌گذاری Class

می‌توانیم نام‌های مختلفی برای کلاس انتخاب کنیم:

<p class="title"></p>

<p class="description"></p>

<p class="warning"></p>

<p class="success"></p>

و در CSS:

.title {
    color: blue;
}

.description {
    color: #555;
}

.warning {
    color: red;
}

.success {
    color: green;
}

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

مثلاً:

<p class="warning">

از:

<p class="red-text">

معمولاً مفهوم بیشتری درباره کاربرد عنصر منتقل می‌کند.

یک عنصر می‌تواند چند Class داشته باشد

این قابلیت بسیار مهم است.

مثلاً:

<button class="button primary">
    ثبت سفارش
</button>

این عنصر دو کلاس دارد:

button
primary

می‌توانیم برای هرکدام قانون جداگانه بنویسیم:

.button {
    padding: 10px 20px;
    border: none;
}

.primary {
    background-color: orange;
    color: white;
}

در نتیجه هر دو قانون روی یک دکمه اعمال می‌شوند.

چند Class روی یک عنصر

مثلاً:

<div class="card product-card featured">
    محصول ویژه
</div>

این عنصر سه کلاس دارد:

card
product-card
featured

بنابراین می‌توانیم ویژگی‌های عمومی و اختصاصی را جدا کنیم:

.card {
    padding: 20px;
    border: 1px solid #ddd;
}

.product-card {
    background-color: white;
}

.featured {
    border-color: orange;
}

این روش در پروژه‌های واقعی بسیار کاربردی است.

ID Selector

نوع دیگری از Selector، ID Selector است.

فرض کنید HTML ما چنین باشد:

<h1 id="main-title">
    آموزش طراحی وب
</h1>

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

#main-title {
    color: orange;
}

بنابراین:

#main-title
     ↑
 علامت ID

است.

ID باید در یک سند HTML برای یک عنصر مشخص استفاده شود و نباید چند عنصر مختلف یک ID یکسان داشته باشند.

تفاوت Class و ID

این موضوع را خوب یاد بگیرید.

Class

<p class="text"></p>
<p class="text"></p>
<p class="text"></p>

یک Class می‌تواند روی چند عنصر استفاده شود.

ID

<h1 id="main-title"></h1>

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

در CSS:

.text {
    color: gray;
}

و:

#main-title {
    color: orange;
}

مقایسه Class و ID

ویژگی	Class	ID
علامت در CSS	`.`	`#`
استفاده روی چند عنصر	بله	نباید
مناسب برای	گروهی از عناصر	عنصر مشخص
مثال	`.card`	`#header`

در طراحی رابط کاربری، Classها معمولاً کاربرد بسیار گسترده‌ای دارند.

Universal Selector

یک Selector دیگر در CSS وجود دارد که با علامت * نوشته می‌شود.

* {
    margin: 0;
}

این Selector تمام عناصر صفحه را انتخاب می‌کند.

مثلاً:

* {
    box-sizing: border-box;
}

یعنی این قانون برای تمام عناصر انتخاب‌شده توسط Universal Selector اعمال می‌شود.

مثال ساده

HTML:

<h1>عنوان</h1>

<p>پاراگراف</p>

<div>محتوا</div>

CSS:

* {
    font-family: sans-serif;
}

در نتیجه فونت تمام این عناصر تحت تأثیر قرار می‌گیرد.

آیا باید همیشه از `*` استفاده کنیم؟

خیر.

چون:

* {
    ...
}

دامنه بسیار گسترده‌ای دارد.

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

Selector List

گاهی چند عنصر باید دقیقاً یک Style داشته باشند.

مثلاً:

h1 {
    color: orange;
}

h2 {
    color: orange;
}

h3 {
    color: orange;
}

این کد کار می‌کند، اما تکراری است.

می‌توانیم Selectorها را با کاما کنار هم قرار دهیم:

h1,
h2,
h3 {
    color: orange;
}

این روش را Selector List می‌نامیم.

مثال دیگر

h1,
p,
button {
    font-family: sans-serif;
}

این قانون روی هر سه نوع عنصر اعمال می‌شود.

ترکیب Type و Class

می‌توانیم یک Type Selector و Class Selector را با هم ترکیب کنیم.

مثلاً:

<p class="special">
    متن ویژه
</p>

<div class="special">
    بخش ویژه
</div>

اگر بنویسیم:

.special {
    color: red;
}

هر دو عنصر انتخاب می‌شوند.

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

p.special {
    color: blue;
}

فقط <p>ای که کلاس special دارد انتخاب می‌شود.

یعنی:

p.special
│ └────── کلاس
└──────── نوع عنصر

بین p و .special نیز نباید فاصله قرار بگیرد.

مثال

HTML:

<h2 class="title">
    عنوان
</h2>

<p class="title">
    متن
</p>

CSS:

.title {
    color: red;
}

p.title {
    color: blue;
}

نتیجه:

<h2 class="title"> قرمز است.
<p class="title"> آبی است.

چون p.title فقط یک عنصر p با کلاس title را هدف قرار می‌دهد.

تفاوت `p.title` و `p .title`

این دو Selector کاملاً متفاوت هستند.

بدون فاصله

p.title {
    color: red;
}

یعنی:

عنصر p که خودش کلاس title دارد.

مثلاً:

<p class="title">
    متن
</p>

با فاصله

p .title {
    color: blue;
}

یعنی:

عنصری با کلاس title که داخل یک p قرار گرفته است.

مثلاً:

<p>
    متن
    <span class="title">
        عبارت ویژه
    </span>
</p>

در اینجا .title روی span قرار دارد و داخل p است.

پس فاصله در Selectorها بسیار مهم است.

در مقالات بعدی این موضوع را با Combinatorها به‌صورت کامل‌تر بررسی خواهیم کرد.

ترکیب Classها

می‌توانیم چند Class را نیز بدون فاصله ترکیب کنیم.

مثلاً:

<div class="card featured">
    محصول ویژه
</div>

CSS:

.card.featured {
    border: 2px solid orange;
}

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

card
+
featured

مثلاً:

<div class="card featured">

انتخاب می‌شود.

اما:

<div class="card">

انتخاب نمی‌شود.

و:

<div class="featured">

نیز انتخاب نمی‌شود.

ترکیب Type، Class و ID

می‌توانیم چند Selector ساده را نیز با هم ترکیب کنیم.

مثلاً:

<p class="special" id="important">
    متن مهم
</p>

و:

p.special#important {
    color: red;
}

این Selector بسیار دقیق است.

یعنی:

عنصر باید p باشد.
کلاس special را داشته باشد.
ID آن important باشد.

در CSS می‌توان Selectorهای ساده را به شکل Compound Selector کنار هم قرار داد، به شرط اینکه ساختار آن‌ها صحیح باشد.

البته در این مرحله نیازی نیست از Selectorهای بسیار پیچیده استفاده کنیم.

یک مثال کامل

HTML:

<!DOCTYPE html>
<html lang="fa" dir="rtl">

<head>
    <meta charset="UTF-8">

    <title>تمرین Selectorها</title>

    <link rel="stylesheet" href="style.css">
</head>

<body>

    <h1 id="main-title">
        آموزش CSS
    </h1>

    <h2 class="section-title">
        Selectorها
    </h2>

    <p>
        این یک پاراگراف معمولی است.
    </p>

    <p class="important">
        این یک پاراگراف مهم است.
    </p>

    <div class="card">
        کارت اول
    </div>

    <div class="card featured">
        کارت ویژه
    </div>

</body>

</html>

CSS:

* {
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
}

#main-title {
    color: orange;
}

.section-title {
    color: blue;
}

p {
    color: #555;
}

.important {
    color: red;
}

.card {
    padding: 20px;
    margin: 10px 0;
    border: 1px solid #ddd;
}

.card.featured {
    border-color: orange;
}

در این مثال تقریباً تمام Selectorهای پایه‌ای که تا اینجا یاد گرفته‌ایم استفاده شده‌اند.

Selectorها و ساختار HTML

یکی از نکات مهم این است که Selectorها را بر اساس ساختار HTML انتخاب کنیم.

مثلاً اگر HTML ما این باشد:

<header>
    <h1>سایت من</h1>
</header>

می‌توانیم بنویسیم:

header {
    background-color: #222;
}

یا:

h1 {
    color: white;
}

یا از Class استفاده کنیم:

<header class="site-header">
    <h1 class="site-title">
        سایت من
    </h1>
</header>

و:

.site-header {
    background-color: #222;
}

.site-title {
    color: white;
}

در پروژه‌های واقعی معمولاً Classها برای طراحی اجزای رابط کاربری بسیار مفید هستند.

انتخاب Selector مناسب

یک سؤال مهم:

چه زمانی از Type، Class یا ID استفاده کنیم؟

یک راهنمای ساده:

Type Selector

وقتی می‌خواهیم یک نوع عنصر را به‌صورت عمومی هدف قرار دهیم:

p {
    line-height: 1.8;
}

Class Selector

وقتی یک Style برای یک گروه یا نوع خاص از عناصر داریم:

.card {
    padding: 20px;
}

ID Selector

وقتی یک عنصر مشخص و یکتا داریم:

#main-title {
    color: orange;
}

Universal Selector

وقتی واقعاً می‌خواهیم تمام عناصر را هدف قرار دهیم:

* {
    box-sizing: border-box;
}

اشتباهات رایج در Selectorها

اشتباه اول: فراموش کردن نقطه Class

اشتباه:

title {
    color: red;
}

اگر HTML این باشد:

<h1 class="title">
    عنوان
</h1>

باید بنویسیم:

.title {
    color: red;
}

اشتباه دوم: استفاده از `#` به جای `.`

اگر HTML:

<p class="description">
    توضیحات
</p>

باشد، این اشتباه است:

#description {
    color: gray;
}

چون # برای ID است.

کد صحیح:

.description {
    color: gray;
}

اشتباه سوم: استفاده اشتباه از ID

این HTML را در نظر بگیرید:

<p id="text">متن اول</p>

<p id="text">متن دوم</p>

نباید یک ID یکسان را روی چند عنصر قرار دهیم.

بهتر است از Class استفاده کنیم:

<p class="text">متن اول</p>

<p class="text">متن دوم</p>

و:

.text {
    color: gray;
}

اشتباه چهارم: فراموش کردن فاصله

این دو Selector متفاوت هستند:

.card.title

و:

.card .title

اولی یعنی یک عنصر که هر دو کلاس را دارد.

دومی یعنی عنصری با کلاس title که درون عنصری با کلاس card قرار گرفته است.

اشتباه پنجم: استفاده بیش از حد از Selectorهای عمومی

مثلاً:

div {
    color: red;
}

اگر سایت بزرگی داشته باشیم، ممکن است تعداد زیادی <div> داشته باشیم.

در نتیجه این قانون می‌تواند عناصر زیادی را تحت تأثیر قرار دهد.

گاهی بهتر است از Class استفاده کنیم:

.product-card {
    color: red;
}

این کار کنترل بیشتری به ما می‌دهد.

تمرین‌های مقاله

تمرین اول — Type Selector

یک صفحه بسازید که شامل موارد زیر باشد:

<h1>عنوان</h1>

<p>متن اول</p>

<p>متن دوم</p>

<button>ثبت</button>

سپس:

h1 را نارنجی کنید.
p را خاکستری کنید.
button را سبز کنید.

تمرین دوم — Class Selector

HTML زیر را بسازید:

<p class="warning">
    هشدار اول
</p>

<p class="warning">
    هشدار دوم
</p>

<p>
    متن عادی
</p>

سپس کاری کنید که فقط پاراگراف‌های warning قرمز شوند.

تمرین سوم — ID Selector

یک عنوان با ID زیر ایجاد کنید:

<h1 id="main-title">
    وب‌سایت من
</h1>

سپس با CSS رنگ آن را تغییر دهید.

تمرین چهارم — چند Class

HTML:

<button class="button primary">
    ثبت سفارش
</button>

<button class="button secondary">
    انصراف
</button>

CSS را طوری بنویسید که:

.button ویژگی‌های مشترک را داشته باشد.
.primary رنگ مخصوص دکمه اصلی را داشته باشد.
.secondary رنگ مخصوص دکمه دوم را داشته باشد.

تمرین پنجم — Selector List

کاری کنید که این عناصر رنگ یکسانی داشته باشند:

<h1>عنوان</h1>
<h2>عنوان دوم</h2>
<p>متن</p>

اما به جای سه Rule جداگانه، از یک Selector List استفاده کنید.

چالش مقاله

یک صفحه محصول ساده طراحی کنید.

HTML باید شامل این قسمت‌ها باشد:

عنوان سایت
عنوان محصول
توضیحات محصول
قیمت
دکمه خرید
کارت ویژگی‌ها

برای عناصر از Classهای مختلف استفاده کنید:

product
product-title
product-description
product-price
button
primary
feature-card

سپس با CSS:

عنوان اصلی را با ID انتخاب کنید.
عنوان محصول را با Class انتخاب کنید.
تمام پاراگراف‌ها را با Type Selector تنظیم کنید.
دکمه را با یک Class عمومی طراحی کنید.
دکمه خرید را با ترکیب دو Class متفاوت کنید.
کارت‌های ویژگی را با یک Class مشترک طراحی کنید.

هدف این تمرین این است که متوجه شوید هر Selector چه زمانی کاربرد دارد.

یک نکته مهم برای ادامه مسیر

در این مقاله Selectorهای پایه را یاد گرفتیم، اما Selectorهای CSS بسیار گسترده‌تر از این موارد هستند.

برای مثال در CSS می‌توانیم عناصری را بر اساس:

انتخاب کنیم.

در مقالات بعدی به‌تدریج این قابلیت‌ها را یاد می‌گیریم. CSS Selectorها فقط چند دستور ساده نیستند؛ آن‌ها یکی از ابزارهای اصلی برای کنترل دقیق ساختار صفحه هستند.

چک‌لیست یادگیری

قبل از رفتن به مقاله بعدی مطمئن شوید که می‌توانید:

مفهوم Selector را توضیح دهید.
Type Selector را استفاده کنید.
Class Selector را استفاده کنید.
ID Selector را استفاده کنید.
تفاوت Class و ID را توضیح دهید.
Universal Selector را بشناسید.
چند Selector را با کاما ترکیب کنید.
چند Class را روی یک عنصر قرار دهید.
Type و Class را ترکیب کنید.
تفاوت p.title و p .title را توضیح دهید.
چند Class را با هم ترکیب کنید.
Selector مناسب برای یک عنصر را انتخاب کنید.

جمع‌بندی

Selectorها به CSS کمک می‌کنند مشخص کند کدام عناصر HTML باید Style شوند.

مهم‌ترین Selectorهایی که در این مقاله یاد گرفتیم:

Type Selector

p {
    color: red;
}

Class Selector

.card {
    padding: 20px;
}

ID Selector

#main-title {
    color: orange;
}

Universal Selector

* {
    box-sizing: border-box;
}

Selector List

h1,
h2,
h3 {
    color: blue;
}

و همچنین یاد گرفتیم که Selectorها را می‌توان برای انتخاب‌های دقیق‌تر با یکدیگر ترکیب کرد:

p.special {
    color: red;
}

و:

.card.featured {
    border-color: orange;
}

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

۲۰

نظرات

هنوز نظری ثبت نشده است.

Selectorها در CSS

Selector چیست؟

چرا Selectorها مهم هستند؟

انواع Selector در CSS

Type Selector

مثال‌های Type Selector

نکته مهم درباره Type Selector

Class Selector

یک کلاس می‌تواند روی چند عنصر استفاده شود

نام‌گذاری Class

یک عنصر می‌تواند چند Class داشته باشد

چند Class روی یک عنصر

ID Selector

تفاوت Class و ID

Class

ID

مقایسه Class و ID

Universal Selector

مثال ساده

آیا باید همیشه از * استفاده کنیم؟

Selector List

مثال دیگر

ترکیب Type و Class

مثال

تفاوت p.title و p .title

بدون فاصله

با فاصله

ترکیب Classها

ترکیب Type، Class و ID

یک مثال کامل

Selectorها و ساختار HTML

انتخاب Selector مناسب

Type Selector

Class Selector

ID Selector

Universal Selector

اشتباهات رایج در Selectorها

اشتباه اول: فراموش کردن نقطه Class

اشتباه دوم: استفاده از # به جای .

اشتباه سوم: استفاده اشتباه از ID

اشتباه چهارم: فراموش کردن فاصله

اشتباه پنجم: استفاده بیش از حد از Selectorهای عمومی

تمرین‌های مقاله

تمرین اول — Type Selector

تمرین دوم — Class Selector

تمرین سوم — ID Selector

تمرین چهارم — چند Class

تمرین پنجم — Selector List

چالش مقاله

یک نکته مهم برای ادامه مسیر

چک‌لیست یادگیری

جمع‌بندی

Type Selector

Class Selector

ID Selector

Universal Selector

Selector List

نظرات

آیا باید همیشه از `*` استفاده کنیم؟

تفاوت `p.title` و `p .title`

اشتباه دوم: استفاده از `#` به جای `.`