آموزش class و id در CSS | انتخابگرها در CSS

آخرین بروزرسانی در تاریخ : 16 تیر 1402

کلاس در CSS: با یکی دیگر از سری جلسات رایگان آموزش html و css در خدمت شما همراهان گرانقدر آکادمی وبکیما هستیم، اگر جلسات آموزش html و CSS را تا به اینجا به صورت عملی دنبال کرده باشید، تقریبا با مباحث اولیه زبان‌های HTML و CSS به خوبی آشنا شدید، از این جلسه به بعد که با انتخابگرها در CSS آشنا شوید، کم کم وارد مباحث جذاب HTML و CSS خواهید شد. پس اگر می‌خواهید به صورت کامل با کلاس‌ها و آیدی‌ها در زبان نشانه گذاری CSS آشنا شوید، این جلسه را نیز تا انتها و به صورت عملی دنبال کنید.

راهنمای مطالعه:

انتخاب‌گر یا همان سلکتور ـ Selector چیست؟

همانطور که در جلسات قبل هم گفتیم، زبان HTML و زبان CSS مکمل یکدیگر هستند، ما با استفاده از زبان اچ تی ام ال ساختار اسکلت مانند یک صفحه وب را می‌سازیم و توسط زبان CSS به آن رنگ و لعاب می‌دهیم، حال زمانی که بخواهیم به یکی از تگ‌های html یک سری استایل یا همان کد CSS بدهیم، باید بتوانیم آن را انتخاب کنیم! به عنوان مثال ما چندین تگ h1 در یک صفحه وب داریم، اما می‌خواهیم فقط به اولین تگ h1 یک فونت سایز بزرگتر نسبت بدهیم، چگونه باید این کار را انجام دهیم؟ اینجاست که انتخاب‌گرها یا همان Selectors در زبان CSS به کمک ما می‌آیند.

انتخاب‌ با استفاده از نام تگ‌ها

اگر بخواهید به تمامی تگ‌ها که از یک خانواده هستند استایل بدهید، می‌توانید از این انتخاب‌گر استفاده کنید، به عنوان مثال زمانی‌که بخواهیم به تمامی تگ‌های پاراگراف یا همان تگ‌های p یک سایز فونت خاص بدهیم، می‌توانیم نام تگ را به عنوان سلکتور انتخاب کنیم، مثال زیر را در نظر بگیرید:

p{
font-size: 14px;
}

با نوشتن قطعه کد بالا، تمامی تگ‌های p در صفحه وب مورد نظر سایز فونت 14px را می‌گیرند، اما اگر بخواهید برخی از تگ‌های p سایز فونت‌شان با برخی دیگر متفاوت باشد، دیگر نمی‌توانید از این روش استفاده کنید.

id در CSS یا id در html

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

برای تعریف شناسه در CSS، باید یک نام شناسه منحصر به فرد انتخاب کنید. معمولاً از کلمات لاتین و بدون فاصله استفاده می‌شود و با علامت صلیب “#” شروع می‌شود. به عنوان مثال، اگر بخواهیم یک شناسه به نام “header” تعریف کنیم، باید به صورت زیر عمل کنیم:

#header {
  /* استایل و ویژگی‌های خاص شناسه "header" را اینجا تعریف کنید */
}

سپس، می‌توانید شناسه “header” را به المان HTML مورد نظر اضافه کنید. برای این کار، از ویژگی “id” در المان استفاده می‌شود. به عنوان مثال، اگر می‌خواهید یک تگ <div> را با استایل شناسه “header” طراحی کنید، می‌توانید به صورت زیر عمل کنید:

<div id="header">این یک عنصر است</div>

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

انتخاب با استفاده از id

شما می‌توانید به هر کدام از تگ‌های html یک صفت id بدهید تا آن تگ را منحصر به فرد کنید، در واقع زمانی که به یکی از تگ‌های html یک آیدی می‌دهید، می‌توانید با استفاده از همان آیدی آن را در فایل استایل فراخوانی کنید و یک کد استایل را به آن آیدی خاص اختصاص بدهید، به مثال زیر دقت کنید:

<!DOCTYPE html>
<html>
<head>
<style>
#firstname {
  font-size: 18px;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>

  <p id="firstname">My name is Nabi.</p>

</body>
</html>

همانطور که در مثال بالا مشاهده می‌کنید، به تگ p یک شناسه یا همان آیدی با مقدار firstname نسبت داده شده است که در کدهای استایل برای انتخاب این آیدی از کاراکتر # استفاده شده است، توجه داشته باشید که فقط زمانی که # قبل از id قرار گیرد مرورگر متوجه می‌شود که باید کدام تگ را انتخاب کند.

نکته مهم: دقت کنید که هر id در صفحه وب باید منحصر به فرد باشد، یعنی شما از هر آیدی فقط یک بار می‌توانید در یک صفحه وب استفاده کنید و اگر یک آیدی را به دو یا بیشتر از دو تگ بدهید، در واقع کار اشتباهی انجام داده‌اید.

کلاس در CSS

کلاس در CSS یک مفهوم بسیار مهم و قدرتمند است که به شما امکان می‌دهد یک گروه از المان‌های HTML را با یک استایل مشترک مشخص کنید. با استفاده از کلاس‌ها، می‌توانید به راحتی استایل و ویژگی‌های خاصی را به یک یا چند المان اختصاص دهید بدون اینکه نیازی به تکرار کدها داشته باشید.

برای استفاده از کلاس در CSS، ابتدا باید یک نام کلاس منحصر به فرد تعریف کنید. معمولاً نام کلاس با استفاده از یک کلمه یا چند کلمه به صورت لاتین و بدون فاصله تعریف می‌شود و با نقطه “.” شروع می‌شود. به عنوان مثال، اگر بخواهیم یک کلاس به نام “highlight” تعریف کنیم، باید به صورت زیر عمل کنیم:

.highlight {
  /* استایل و ویژگی‌های خاص کلاس "highlight" را اینجا تعریف کنید */
}

سپس، می‌توانید کلاس “highlight” را به هر المانی که می‌خواهید اعمال کنید. به طور معمول، این کار با استفاده از ویژگی “class” در المان HTML انجام می‌شود. به عنوان مثال، اگر می‌خواهید یک پاراگراف را با استایل کلاس “highlight” طراحی کنید، می‌توانید به صورت زیر عمل کنید:

<p class="highlight">این یک متن است</p>

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

انتخاب با استفاده از class

همان‌طور که می‌توانید به هر تگ یک ایدی منحصر به فرد بدهید، می‌توانید به تگ‌ها در html صفت class بدهید، در واقع هر زمان که نیاز داشتید به یک سری تگ در html یک سری کدهای استایل نسبت بدهید، می‌توانید از صفت class استفاده کنید، به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
.intro {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<div class="intro">
  <p>My name is Nabi.</p>
  <p>I live in Tehran.</p>
</div>

<p>Webkima Academy.</p>

<p class="intro">I Love My Job!</p>

</body>
</html>

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

نکته مهم: برای انتخاب idها در کدهای CSS باید قبل از آیدی یک کاراکتر # قرار دهید، همچنین برای انتخاب classها در کدهای CSS باید قبل از کلاس یک نقطه {.} قرار دهید.

آیا می‌توان به یک تگ بیشتر از یک id یا class داد؟

بله! شما می‌توانید همزمان به یک تگ در html هم آیدی بدهید و هم چندین کلاس بدهید، در واقع طراحان سایت حرفه‌ای دقیقا به همین صورت عمل می‌کنند! به عنوان مثال یک کلاس می‌سازند که فقط مخصوص سایز فونت 14px است، و هر جا که نیاز به سایز فونت 14px داشتند از آن استفاده می‌کنند! یا یک کلاس می‌سازند برای رنگ آبی! و هر جا که نیاز به رنگ آبی و فونت سایز 14 داشتند از این دو کلاس همزمان استفاده می‌کنند! جالب است این‌ طور نیست؟!

انتخاب همزمان چند کلاس و آیدی در CSS

شما می‌توانید با استفاده از قرار دادن ویرگول در بین کلاس‌ها و آیدی ها به صورت همزمان چند class و id را انتخاب کنید و یک سری کد CSS به آنها نسبت دهید، به مثال زیر توجه کنید:

.class-1, .class-2 , #my-1 , p {
 font-size: 15px;
}

در مثال بالا می‌توانید مشاهده کنید که به صورت همزمان دو کلاس class-1 و class-2 و یک آیدی my-1 و یک تگ p را انتخاب کردیم و به همگی این انتخابگرها فونت سایز 15 پیکسل داده‌ایم.

انتخاب تمامی المان‌های صفحه

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

* {
 font-size: 14px;
}

با قرار دادن قطعه کد بالا در پروژه خود به تمامی تگ‌ها در صفحه وب خود فونت سایز 14 پیکسل داده‌اید! جالب است نه؟! در دوره پیشرفته آموزش HTML و CSS از کاراکتر * استفاده‌های بهینه‌تری خواهیم کرد!

آیا انتخابگر‌ها فقط همین‌ها بودند؟

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

جمع‌ بندی

در انتها امیدواریم که آموزش class و id در CSS و آموزش کار با انتخابگرها در CSS برای شما مفید و جذاب بوده باشد، هر سوالی در رابطه با این جلسه دارید فقط کافیست سوال خود را با جزئیات در بخش نظرات همین جلسه مطرح کنید تا تیم پشتیبانی وبکیما در سریع‌ترین زمان ممکن پاسخگوی شما همراهان عزیز باشند، با تشکر از همراهی شما.