انتخابگرهای CSS؛ آموزش کلاس و شناسه | درس 22

درس 22 از دوره 60 قسمتی آموزش HTML و CSS ارومیا دیزاین

در درس قبل، اولین فایل CSS را ساختیم و ظاهر یک صفحه را تغییر دادیم. اما اگر بخواهیم فقط یکی از چند کارت خدمات را متفاوت طراحی کنیم، انتخاب نام تگ کافی نیست. در این درس، انتخابگرهای CSS را با مثال عملی یاد می گیریم و تفاوت کلاس و شناسه را در یک پروژه کوچک می بینیم.

برای انجام تمرین، روش اتصال CSS به HTML در درس 21 را بلد باشید. اگر در نوشتن ویژگی های HTML هنوز تردید دارید، درس تگ ها و ویژگی ها را مرور کنید؛ class و id هم ویژگی های عناصر HTML هستند.

در این جلسه چه چیزی می سازیم؟

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

• انتخابگر نوع، کلاس و شناسه را تشخیص می دهید.
• چند کلاس را روی یک عنصر قرار می دهید.
• تفاوت .card.featured و .card .featured را توضیح می دهید.
• چند انتخابگر را با ویرگول گروه بندی می کنید.
• برای عناصر داخل یک بخش، انتخابگر وابسته به ساختار می نویسید.

انتخابگر CSS چیست؟

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

p {
  color: #334155;
}

انتخابگر عنصر تازه ای نمی سازد. اگر در HTML هیچ پاراگرافی وجود نداشته باشد، این قانون هدفی پیدا نمی کند. همچنین انتخابگر به تنهایی درباره جایگاه ظاهری عنصر تصمیم نمی گیرد؛ دستورهایی مثل رنگ و فاصله داخل بلوک اعلان نوشته می شوند.

انتخابگر نوع؛ انتخاب عناصر با نام تگ

برای انتخاب عنوان های h2، نام تگ را بدون علامت های کوچک تر و بزرگ تر می نویسیم:

h2 {
  color: #075985;
}

این قانون روی همه عناصر h2 سند اثر دارد، نه فقط اولین عنوان. برای ساخت سلسله مراتب درست همچنان باید عنوان ها و پاراگراف های HTML را اصولی بنویسید. تغییر اندازه یا رنگ، نقش معنایی تگ را عوض نمی کند.

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

انتخابگر کلاس در CSS؛ یک نام مشترک برای چند عنصر

در HTML، کلاس را داخل ویژگی class قرار می دهیم. علامت نقطه در مقدار ویژگی نوشته نمی شود:

<article class="card">
  <h3>طراحی سایت شرکتی</h3>
  <p>معرفی کسب و کار و نمایش خدمات.</p>
</article>

در CSS همان نام را با نقطه در ابتدا می نویسیم:

.card {
  background-color: #ffffff;
  padding: 20px;
  border: 1px solid #cbd5e1;
}

کلاس card می تواند روی چند عنصر تکرار شود. هر عنصری که این کلاس را داشته باشد با انتخابگر .card تطبیق دارد؛ لازم نیست همه آن عناصر یک نوع تگ داشته باشند. برای طراحی بخش های تکراری مثل کارت محصول یا کارت خدمات، کلاس یک انتخاب کاربردی است.

نام کلاس را بر اساس نقش بنویسید؛ مثلاً service-card از blue-box روشن تر است، چون اگر رنگ بعداً عوض شود، نام هنوز معنی دارد. در این دوره از نام های انگلیسی ساده با خط تیره استفاده می کنیم. نام های شروع شده با عدد یا دارای علامت های خاص ممکن است در CSS به گریز دادن نویسه ها نیاز داشته باشند؛ برای شروع، نام هایی مثل card و service-link دردسر کمتری دارند.

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

برای اضافه کردن رفتار ظاهری دوم، نام کلاس ها را در HTML با فاصله جدا کنید:

<article class="card featured">
  <h3>طراحی سایت فروشگاهی</h3>
  <p>این کارت پیشنهاد ویژه است.</p>
</article>

این عنصر دو کلاس دارد: card و featured. در HTML از ویرگول یا نقطه برای جدا کردن نام ها استفاده نکنید. در CSS می توانیم عنصری را انتخاب کنیم که هر دو کلاس را همزمان دارد:

.card.featured {
  background-color: #ecfdf5;
  border: 2px solid #166534;
}

در این انتخابگر، میان دو کلاس فاصله وجود ندارد. عنصر باید هم card و هم featured داشته باشد. ترتیب نام ها در ویژگی class نتیجه تطبیق را عوض نمی کند؛ class="featured card" نیز همان دو کلاس را دارد. ترتیب کلاس ها در HTML تعیین کننده اولویت قوانین CSS نیست.

انتخابگر شناسه یا ID؛ هدف گرفتن یک بخش مشخص

شناسه را در HTML با ویژگی id می نویسیم و در CSS از علامت # استفاده می کنیم:

<section id="contact">
  <h2>تماس با استودیو</h2>
  <p>این یک بخش تمرینی است.</p>
</section>

#contact {
  border: 2px solid #075985;
  padding: 20px;
}

مقدار id باید در همان سند یکتا باشد. دو عنصر را با id یکسان نسازید و چند شناسه را با فاصله داخل یک ویژگی قرار ندهید. هر عنصر می تواند یک شناسه و چند کلاس داشته باشد؛ این دو ویژگی جای هم را نمی گیرند.

شناسه کاربردهای دیگری هم دارد. در درس لینک ها و مسیرها دیدیم که href="#contact" به بخش دارای id="contact" اشاره می کند. در آموزش فرم و label هم ویژگی for برچسب را به id ورودی متصل کردیم. اگر شناسه را تغییر دادید، ارجاع های وابسته را نیز بررسی کنید.

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

تفاوت فاصله و اتصال کلاس ها در انتخابگر

دو انتخابگر زیر با وجود شباهت ظاهری، هدف یکسانی ندارند:

/* یک عنصر که هر دو کلاس را دارد */
.card.featured {
  border: 2px solid #166534;
}

/* عنصر featured که داخل عنصر card قرار دارد */
.card .featured {
  color: #166534;
}

در حالت اول همان عنصر باید هر دو کلاس را داشته باشد. در حالت دوم، فاصله رابطه «داخل بودن» را بیان می کند: عنصری با کلاس featured که از نوادگان عنصری با کلاس card است انتخاب می شود. این عنصر داخلی می تواند فرزند مستقیم یا چند سطح پایین تر باشد. خود کارت صرفاً به دلیل داشتن هر دو کلاس، با انتخابگر فاصله دار تطبیق پیدا نمی کند.

انتخاب عنوان ها و لینک های داخل کارت

اگر بخواهیم فقط عنوان h3 داخل کارت ها را تغییر دهیم، می نویسیم:

.card h3 {
  margin-top: 0;
}

.card .service-link {
  font-weight: bold;
}

قانون اول هر h3 داخل عنصری با کلاس card را انتخاب می کند. قانون دوم لینک یا عنصر دیگری با کلاس service-link را که داخل کارت قرار دارد انتخاب می کند. برای قابل فهم بودن این رابطه، ساختار HTML باید روشن باشد؛ درس ساختار معنایی صفحه را در پروژه رعایت کنید.

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

وقتی دو گروه باید اعلان های یکسان داشته باشند، انتخابگرها را با ویرگول جدا کنید. برای مثال، این قانون رنگ تمام عنوان های h1 و h2 را یکسان می کند:

h1,
h2 {
  color: #075985;
}

ویرگول یعنی هرکدام از این انتخابگرها می توانند هدف باشند. اما h1 h2 معنای دیگری دارد: h2 داخل h1 را جستجو می کند. همچنین .card, .featured همه عناصر دارای یکی از دو کلاس را انتخاب می کند؛ برخلاف .card.featured داشتن هر دو کلاس لازم نیست.

انتخابگر همگانی * چه کاربردی دارد؟

علامت ستاره انتخابگر همگانی است و با عناصر تطبیق پیدا می کند. مثلاً در .card * همه عناصر داخل کارت انتخاب می شوند. در پروژه این جلسه به چنین قانون گسترده ای نیاز نداریم.

اینکه بتوانیم همه عناصر را انتخاب کنیم، دلیل نمی شود رنگ، فاصله و اندازه تمام صفحه را با یک قانون همگانی عوض کنیم. هنگام نوشتن هر انتخابگر از خودتان بپرسید: آیا تمام این عناصر باید این تغییر را بگیرند؟ هرچه هدف روشن تر باشد، بررسی نتیجه ساده تر می شود.

کد کامل پروژه درس 22

دو فایل index.html و style.css بسازید و کنار هم قرار دهید. ابتدا HTML زیر را ذخیره کنید. کلاس ها روی اجزای تکراری قرار دارند و بخش تماس شناسه یکتا دارد.

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>تمرین انتخابگرهای CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <p class="eyebrow">تمرین درس 22 ارومیا دیزاین</p>
    <h1>خدمات استودیو آفتاب</h1>
    <p class="intro">برای هر پروژه، خدمت مناسب را انتخاب کنید.</p>
    <a href="#contact">رفتن به بخش تماس</a>
  </header>
  <main>
    <section aria-labelledby="services-title">
      <h2 id="services-title">خدمات ما</h2>
      <article class="card">
        <h3>طراحی سایت شرکتی</h3>
        <p>معرفی کسب و کار و نمایش خدمات.</p>
        <a class="service-link" href="#contact">پرسش درباره سایت شرکتی</a>
      </article>
      <article class="card featured">
        <h3>طراحی سایت فروشگاهی</h3>
        <p>نمایش محصولات و آماده سازی مسیر خرید.</p>
        <p class="badge">پیشنهاد ویژه</p>
        <a class="service-link" href="#contact">پرسش درباره سایت فروشگاهی</a>
      </article>
    </section>
    <section id="contact" aria-labelledby="contact-title">
      <h2 id="contact-title">تماس با استودیو</h2>
      <p>این صفحه آموزشی است و درخواست واقعی ثبت نمی کند.</p>
    </section>
  </main>
  <footer>
    <p>پروژه تمرینی دوره HTML و CSS</p>
  </footer>
</body>
</html>

حالا CSS زیر را در style.css ذخیره کنید. کارت دوم پس زمینه سبز روشن و کادر سبز دارد؛ هر دو کارت فاصله داخلی و گوشه های گرد مشترک دارند. لینک های داخل کارت پررنگ هستند و لینک بالای صفحه همچنان با ظاهر پایه نمایش داده می شود.

body {
  font-family: Tahoma, sans-serif;
  line-height: 1.8;
  background-color: #f1f5f9;
  color: #1e293b;
  margin: 0;
  padding: 24px;
}

h1,
h2 {
  color: #075985;
}

a {
  color: #075985;
  text-decoration: underline;
}

.intro {
  font-size: 20px;
}

.eyebrow {
  color: #475569;
}

.card {
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.card.featured {
  background-color: #ecfdf5;
  border: 2px solid #166534;
}

.card h3 {
  margin-top: 0;
}

.card .service-link {
  font-weight: bold;
}

.badge {
  color: #166534;
  font-weight: bold;
}

#contact {
  background-color: #ffffff;
  border: 2px solid #075985;
  border-radius: 12px;
  padding: 20px;
}

چرا کارت ویژه هم ظاهر مشترک دارد و هم ظاهر اختصاصی؟

عنصر دوم با انتخابگر .card و انتخابگر .card.featured تطبیق دارد. دستورهایی مثل padding و border-radius از قانون مشترک می آیند و قانون اختصاصی زمینه و کادر آن را متفاوت می کند. وقتی دو قانون برای یک ویژگی مقدار متفاوت دارند، سازوکار آبشار و اولویت تعیین می کند کدام اعلان اعمال شود. در این پروژه ساده، قانون ترکیبی کارت ویژه برای این ویژگی ها غالب است؛ جزئیات آن موضوع جلسه بعد است.

اشتباه های رایج در انتخابگرهای CSS

• نوشتن نقطه داخل class: در HTML بنویسید class="card"، نه class=".card".
• فراموش کردن نقطه در CSS: card انتخابگر نوع است؛ برای کلاس card باید .card بنویسید.
• جابه جا کردن کلاس و شناسه: برای id="contact" انتخابگر #contact لازم است.
• اشتباه گرفتن فاصله با ویرگول: فاصله رابطه ساختاری می سازد و ویرگول انتخابگرهای مستقل را گروه بندی می کند.
• تفاوت املای نام: card و cards دو نام متفاوت هستند. بزرگی و کوچکی حروف نام کلاس و شناسه را هم یکسان نگه دارید.
• تکرار شناسه: برای کارت های متعدد از کلاس استفاده کنید؛ شناسه یکسان را تکرار نکنید.

اگر یک قانون اثر ندارد، ابتدا بررسی کنید عنصر مورد نظر واقعاً با انتخابگر تطبیق دارد یا نه. سپس ذخیره فایل، مسیر stylesheet و نوشتار اعلان ها را کنترل کنید. در ابزار توسعه مرورگر، عنصر را انتخاب کنید و بخش Styles را ببینید؛ می توانید تشخیص دهید قانون اصلاً پیدا نشده یا اعلان آن توسط قانون دیگری کنار زده شده است.

تمرین؛ یک کارت سوم اضافه کنید

1. داخل بخش خدمات، یک article جدید با کلاس card برای «پشتیبانی سایت» اضافه کنید.
2. به پاراگراف توضیح کارت سوم کلاس note بدهید و رنگ آن را #475569 کنید.
3. فقط کارت دوم را با دو کلاس card و featured نگه دارید.
4. اندازه h3 داخل کارت ها را 22px قرار دهید.
5. پس زمینه badge داخل کارت ها را #dcfce7 کنید.

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

<article class="card">
  <h3>پشتیبانی سایت</h3>
  <p class="note">بررسی و نگهداری بخش های سایت.</p>
  <a class="service-link" href="#contact">پرسش درباره پشتیبانی</a>
</article>

.note {
  color: #475569;
}

.card h3 {
  margin-top: 0;
  font-size: 22px;
}

.card .badge {
  background-color: #dcfce7;
}

چک لیست بررسی پروژه

• کارت ها کلاس مشترک card دارند.
• کارت ویژه دو کلاس مستقل دارد و نام آن ها با فاصله جدا شده است.
• id بخش تماس در سند تکرار نشده است.
• عنوان های داخل کارت هدف گرفته شده اند و عنوان های بیرون کارت تغییر ناخواسته ندارند.
• همه لینک های تماس به بخش درست می روند.
• لینک ها زیرخط دارند و تمرکز صفحه کلید پنهان نشده است.

برای یادآوری بررسی با صفحه کلید، درس دسترس پذیری HTML را ببینید. همچنین می توانید همین کلاس های مشترک را روی کارت های پروژه نهایی HTML به کار ببرید؛ تغییر ظاهر نباید لینک ها یا ساختار محتوای آن پروژه را مختل کند.

پرسش های رایج درباره کلاس و شناسه

آیا یک عنصر می تواند هم class و هم id داشته باشد؟

بله. مثلاً یک بخش می تواند شناسه contact و کلاس card داشته باشد. شناسه باید در سند یکتا بماند، ولی نام کلاس روی عناصر دیگر هم می تواند تکرار شود.

چرا نوشتن card بدون نقطه، کلاس را انتخاب نمی کند؟

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

آیا ترتیب نام کلاس ها در HTML مهم است؟

برای تطبیق انتخابگرهای معمول کلاس، جابه جا کردن ترتیب نام ها نتیجه را عوض نمی کند. اولویت اعلان ها را ترتیب کلاس در HTML تعیین نمی کند.

تفاوت .card.featured و .card .featured چیست؟

اولی یک عنصر با هر دو کلاس را می خواهد. دومی عنصر featured داخل عنصر card را انتخاب می کند.

برای ده کارت خدمات، ده شناسه لازم داریم؟

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

جلسه بعد چه می آموزیم؟

اکنون می توانید هدف قوانین CSS را دقیق تر انتخاب کنید. در درس 23 سراغ آبشار، ارث بری و اولویت انتخابگرها می رویم تا بفهمیم وقتی چند قانون با یک عنصر تطبیق دارند، نتیجه نهایی چگونه تعیین می شود.

برای مرور جلسات، فهرست دوره HTML و CSS ارومیا دیزاین را ببینید.