چطور می‌توان یک عنصر را انتخاب کرد اما عنصر همنام تودرتو را انتخاب نکرد؟

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

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

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

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

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

کد نمونه

<style>
  .parent > .child {
    color: blue;
  }
</style>

<div class="parent">
  متن خارج از فرزند خاص
  <div class="child">متن فرزند خاص</div>
  <div>
    <div class="child">متن فرزند تودرتو</div>
  </div>
</div>

توضیح کد

<style>
تگ <style> برای تعریف CSS داخلی استفاده می‌شود.

.parent > .child
این انتخابگر تنها فرزند مستقیم عنصر با کلاس .parent که کلاس .child نیز داشته باشد را انتخاب می‌کند.

color: blue;
تنظیم رنگ متن برای فرزند اصلی که کلاس .child دارد به رنگ آبی است.

خروجی نتیجه در مرورگر بدین صورت است که تنها عنصر با کلاس .child که مستقیماً درون .parent فراخوانی شده است، رنگ متنش به رنگ آبی تغییر می‌کند.