📌همه میدونیم که Css3 هنوز داره اپدیت میشه و هی چیزای جدیدی بهش اضافه میشه، و خب جدیدا شنیدم که نستینگ ( Css nesting ) هم به خود Css اضافه شده، ( یعنی یکی از بزرگ ترین امکاناتی که Sass داشت برامون فراهم میکرد دیگه داخل خود Css موجوده، ولی با سینتکس متفاوت

الان شما دیگه راحت میتونین به صورت نستینگ استایل بدین:

.parent-rule {
  /* parent rule properties */
  .child-rule {
    /* child rule properties */
  }
}

یا حتی هاور و سلکتور های دیگه:

.parent-rule {
  /* parent rule properties */
  :hover {
    /* child rule properties */
  }
}

بخایم یکم عمیق تر بشیم داخلش، الان & اشاره داره به همون کلاس پرنت، یعنی تو هر مرحله، اشاره میکنه به کلاس بالاییش، الان این کد رو در نظر بگیرین:🌟

.card {
  /* .card styles */
  .featured & & & {
    /* .featured .card .card .card styles */
  }
}

🔥این کد در اصل داخل مرورگر اینطوری میشه:

.card {
  /* .card styles */
}

.featured .card .card .card {
  /* .featured .card .card .card styles */
}

حیفه یه مثال ازش نبینیم:😠

<p class="example">
  This paragraph <a href="#">contains a link</a>, try hovering or focusing it.
</p>

.example {
  font-family: system-ui;
  font-size: 1.2rem;
  & > a {
    color: tomato;
    &:hover,
    &:focus {
      color: ivory;
      background-color: tomato;
    }
  }
}

⚡️یه نکته خفن اینکه اگه از & داخل nested style ها استفاده نکنیم خب به چی اشاره میکنه؟ جوابش میشه اسکوپ اصلی! همون scoping root
مثلا:

& {
  color: blue;
  font-weight: bold;
}

&:hover {
  background-color: wheat;
}

/* & => :scope */

✔️و طبق جدولی که درباره ساپورت مرورگر ها راجبش دیدم، اینطوریه که همه مرورگرا کاملا ساپورتش میکنن و مشکلی نداره ولی خب مربوط به نسخه میشه که چند تاشونو مینویسم:
-Chrome: 120
- Edge: 120
-Firefox: 117
-Opera: 106

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

#css #css_nesting
☕️ @CodeExplore