قبل از خواندن متن زیر یکبار کدی که در ادامه قرار میدم رو مرور کن .

در ابتدای این پروژه برام سوال شد که نقش اون سه تا دیوی که آیدی‌های t1-t2-t3 رو دارن و در ابتدای کد قرار داده شد چیه, و این مورد توی سرم بود که مثلا وقتی لینک t2 کلیک میشه مستقیم المنت هایی که میخایم رو سلکت کنیم و دستکاریشون کنیم.

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

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

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

با توجه به کد پایین روی المنتی که کلاس child رو داره سودو کلاس hover رو تعریف کردیم , خب حالا میتونیم زمانی که child هاور میشه خودش و یا المنت‌های درونش که اینجا grand-child هستش رو دستکاری کنیم, ولی المنت‌های والدش که اینجا parent هستش رو نمی‌تونیم دستکاری کنیم .

نکته پایانی : هنگام استفاده از سودو کلاس‌ها باید سودو کلاس رو روی المنت والد تعریف کنیم که بتونیم المنت‌های فرزند رو دستکاری کنیم

ممنون از وقتی که گذاشتید و امیدوارم اگر تازه وارد هستید مثل خودم به دردتون خورده باشه .

HTML :

  <div class="parent">
    <div class="child">
      <div class="grand-child"></div>
    div>
  div>

CSS :

/* we can manipulate grand child */
.child:hover .grand-child {
  /* some styles ... */
}
/* we can not manipulate parent */
.child:hover .parent {
  /* some styles ... */
}