M

MLOG

فارسی

با تسلط بر شبه‌کلاس‌های موقعیتی CSS مانند :first-child، :last-child، :nth-child() و موارد دیگر، به استایل‌دهی پیشرفته و پویا برای پروژه‌های وب خود دست یابید. انتخاب عناصر خود را بهبود بخشیده و به راحتی رابط‌های کاربری جذاب بصری ایجاد کنید.

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

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

درک شبه‌کلاس‌های CSS

قبل از پرداختن به شبه‌کلاس‌های موقعیتی، بیایید به طور خلاصه مرور کنیم که شبه‌کلاس‌ها در CSS چه هستند. شبه‌کلاس‌ها کلمات کلیدی هستند که به انتخابگرها اضافه می‌شوند و حالت خاصی از عنصر(های) انتخاب‌شده را مشخص می‌کنند. آن‌ها به شما اجازه می‌دهند تا عناصر را بر اساس عواملی غیر از نام، ویژگی‌ها یا محتوایشان استایل‌دهی کنید؛ بلکه بر اساس موقعیت، حالت یا معیارهای پویای دیگر استایل‌دهی می‌شوند. به عنوان مثال، شبه‌کلاس :hover استایل‌ها را زمانی اعمال می‌کند که کاربر ماوس خود را روی یک عنصر نگه می‌دارد.

مقدمه‌ای بر شبه‌کلاس‌های موقعیتی

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

شبه‌کلاس‌های موقعیتی کلیدی

۱. :first-child

شبه‌کلاس :first-child اولین عنصر فرزند را در داخل والد خود انتخاب می‌کند. این برای اعمال استایل‌های خاص به اولین آیتم در یک لیست، اولین ردیف در یک جدول، یا هر سناریوی دیگری که می‌خواهید عنصر اولیه را برجسته کنید، مفید است.

مثال: استایل‌دهی به اولین آیتم لیست در یک منوی ناوبری.

nav ul li:first-child {
  font-weight: bold;
  color: #007bff;
}

این کد CSS اولین آیتم لیست در <ul> عنصر <nav> را ضخیم و آبی می‌کند.

کاربرد عملی: یک وب‌سایت تجارت الکترونیک را تصور کنید. شما می‌توانید از :first-child برای برجسته کردن بصری اولین محصول در بخش محصولات ویژه استفاده کنید.

۲. :last-child

شبه‌کلاس :last-child، برعکس، آخرین عنصر فرزند را در داخل والد خود انتخاب می‌کند. این برای اضافه کردن یک حاشیه یا مرز به همه آیتم‌ها به جز آخرین آیتم، یا برای اعمال یک استایل خاص به عنصر نهایی در یک سری، عالی است.

مثال: حذف حاشیه پایینی از آخرین آیتم در یک لیست.

ul li {
  border-bottom: 1px solid #ccc;
}

ul li:last-child {
  border-bottom: none;
}

این کد CSS یک حاشیه پایینی به تمام آیتم‌های لیست به جز آخرین آیتم اضافه می‌کند و یک جداسازی بصری تمیز بدون حاشیه اضافی در پایین ایجاد می‌کند.

کاربرد عملی: در یک فرم تماس، ممکن است از :last-child برای حذف حاشیه پایینی از آخرین فیلد ورودی قبل از دکمه ارسال استفاده کنید.

۳. :nth-child(n)

شبه‌کلاس :nth-child(n) یک انتخابگر چندمنظوره‌تر است که به شما امکان می‌دهد عناصر را بر اساس موقعیت عددی‌شان در داخل والدشان هدف قرار دهید. n می‌تواند یک عدد، یک کلمه کلیدی (even یا odd)، یا یک فرمول باشد.

مثال: استایل‌دهی به ردیف‌های زوج در یک جدول.

table tr:nth-child(even) {
  background-color: #f2f2f2;
}

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

مثال: انتخاب فرزند سوم.

div p:nth-child(3) {
  color: green;
}

این کد CSS پاراگراف سوم در یک عنصر <div> را سبز می‌کند.

مثال: استفاده از یک فرمول برای انتخاب هر سومین فرزند.

ul li:nth-child(3n) {
  font-style: italic;
}

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

کاربرد عملی: در یک وب‌سایت خبری، می‌توانید از :nth-child(n) برای استایل‌دهی متفاوت به هر سومین مقاله استفاده کنید تا تنوع بصری ایجاد کرده و محتوای خاصی را برجسته کنید.

۴. :nth-of-type(n)

شبه‌کلاس :nth-of-type(n) شبیه به :nth-child(n) است، اما عناصر را بر اساس نوع آن‌ها در داخل والدشان هدف قرار می‌دهد. این به این معنی است که هنگام شمارش فقط عناصر از همان نوع را در نظر می‌گیرد.

مثال: استایل‌دهی به پاراگراف دوم در یک div.

div p:nth-of-type(2) {
  font-size: 1.2em;
}

این کد CSS اندازه فونت دومین عنصر پاراگراف را در یک <div> افزایش می‌دهد. هنگام شمارش، هر نوع عنصر دیگری را در داخل div نادیده می‌گیرد.

کاربرد عملی: در یک پست وبلاگ، ممکن است از :nth-of-type(n) برای استایل‌دهی متفاوت به هر دومین تصویر استفاده کنید، بدون توجه به وجود عناصر دیگر مانند پاراگراف‌ها یا عنوان‌ها.

۵. :first-of-type

شبه‌کلاس :first-of-type اولین عنصر از نوع خود را در داخل والدش انتخاب می‌کند. این برای استایل‌دهی به اولین پاراگراف، تصویر، یا هر نوع عنصر خاص دیگری در یک کانتینر مفید است.

مثال: استایل‌دهی به اولین تصویر در یک مقاله.

article img:first-of-type {
  float: left;
  margin-right: 10px;
}

این کد CSS اولین تصویر را در یک عنصر <article> به سمت چپ شناور کرده و یک حاشیه به سمت راست آن اضافه می‌کند.

کاربرد عملی: در صفحه توضیحات محصول، ممکن است از :first-of-type برای نمایش برجسته تصویر اصلی محصول استفاده کنید.

۶. :last-of-type

شبه‌کلاس :last-of-type آخرین عنصر از نوع خود را در داخل والدش انتخاب می‌کند. این مکمل :first-of-type است و برای استایل‌دهی به عنصر نهایی از یک نوع خاص در یک کانتینر استفاده می‌شود.

مثال: استایل‌دهی به آخرین پاراگراف در یک بخش.

section p:last-of-type {
  margin-bottom: 0;
}

این کد CSS حاشیه پایینی را از آخرین عنصر پاراگراف در یک <section> حذف می‌کند.

کاربرد عملی: در یک پست وبلاگ، ممکن است از :last-of-type برای حذف حاشیه پایینی از پاراگراف پایانی استفاده کنید تا یک پایان بصری تمیزتر ایجاد شود.

موارد استفاده و مثال‌های واقعی

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

۱. استایل‌دهی یک منوی ناوبری

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


<nav>
  <ul>
    <li><a href="#home">صفحه اصلی</a></li>
    <li><a href="#about">درباره ما</a></li>
    <li><a href="#services">خدمات</a></li>
    <li><a href="#contact">تماس با ما</a></li>
  </ul>
</nav>

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

nav ul li {
  margin-right: 20px;
}

nav ul li:first-child {
  font-weight: bold;
}

nav ul li:last-child {
  margin-right: 0;
}

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

۲. استایل‌دهی یک لیست محصولات

وب‌سایت‌های تجارت الکترونیک اغلب محصولات را به صورت شبکه‌ای یا لیستی نمایش می‌دهند. می‌توان از شبه‌کلاس‌های موقعیتی برای ایجاد لیست‌های محصولات جذاب بصری استفاده کرد.


<div class="product-list">
  <div class="product"><img src="product1.jpg" alt="محصول ۱"><p>توضیحات محصول ۱</p></div>
  <div class="product"><img src="product2.jpg" alt="محصول ۲"><p>توضیحات محصول ۲</p></div>
  <div class="product"><img src="product3.jpg" alt="محصول ۳"><p>توضیحات محصول ۳</p></div>
  <div class="product"><img src="product4.jpg" alt="محصول ۴"><p>توضیحات محصول ۴</p></div>
</div>


.product-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.product {
  border: 1px solid #ccc;
  padding: 10px;
}

.product:nth-child(odd) {
  background-color: #f9f9f9;
}

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

۳. استایل‌دهی یک جدول

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


<table>
  <thead>
    <tr>
      <th>نام</th>
      <th>سن</th>
      <th>کشور</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>جان دو</td>
      <td>۳۰</td>
      <td>آمریکا</td>
    </tr>
    <tr>
      <td>جین اسمیت</td>
      <td>۲۵</td>
      <td>کانادا</td>
    </tr>
    <tr>
      <td>دیوید لی</td>
      <td>۴۰</td>
      <td>انگلستان</td>
    </tr>
  </tbody>
</table>


table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

thead {
  background-color: #f2f2f2;
}

tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

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

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

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

مثال: استایل‌دهی به اولین آیتم با یک کلاس خاص.

ul li.highlight:first-child {
  color: red;
}

این کد CSS رنگ قرمز را فقط به اولین آیتم لیستی که کلاس "highlight" را نیز دارد، اعمال می‌کند.

سازگاری با مرورگرها

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

بهترین شیوه‌ها و ملاحظات

نتیجه‌گیری

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

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

یادگیری بیشتر

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

استایل‌دهی خوبی داشته باشید!