বাসা বাঁধে

নেস্টিং CSS শৈলী নিয়মগুলি আপনার স্টাইলশীটগুলিকে আরও সংগঠিত, সহজে পড়া এবং আরও রক্ষণাবেক্ষণযোগ্য করে তুলতে পারে।

ওভারভিউ

এখন যেহেতু আপনি নির্বাচকদের সম্পর্কে শিখেছেন, আপনি সম্ভবত তাদের আপনার স্টাইলশীটে আরও ভালভাবে সংগঠিত করার উপায় সম্পর্কে ভাবছেন৷ কল্পনা করুন যে আপনি আপনার সাইটের একটি "বৈশিষ্ট্য" বিভাগের ভিতরের আইটেমগুলিতে শৈলী প্রয়োগ করছেন৷ নেস্টিংয়ের মাধ্যমে, আপনি এই ধরনের .feature নিয়মের ভিতরে এই শৈলীগুলিকে গ্রুপ করতে পারেন:

.feature {
  button {
    color: blue;
  }

  .link {
    color: red;
  }

  .text {
    font-size: 1.3em;
  }
}

এটি প্রতিটি শৈলী আলাদাভাবে লেখার মতোই হবে:

.feature button {
  color: blue;
}

.feature .link {
   color: red;
}

.feature .text {
   font-size: 1.3em;
}

নেস্টিং যত গভীর প্রয়োজন তত স্তরে যেতে পারে।

.feature {
  .heading {
    color: blue;

    a {
      color: green;
    }
  }
}

গ্রুপিং এবং সম্পর্ক স্থাপন

নেস্টিং আপনাকে আরও সংক্ষিপ্তভাবে গোষ্ঠীবদ্ধ করতে এবং শৈলীর নিয়মগুলির মধ্যে সম্পর্ক স্থাপন করতে দেয়।

নেস্টেড নিয়মটি ডিফল্টভাবে একটি বংশধর সংযোজক হিসাবে বাইরের নিয়মের সাথে সম্পর্কিত হবে। সম্পর্ক পরিবর্তন করতে নেস্টেড নিয়মে নির্বাচকদের ব্যবহার করুন।

/* targets headings that are siblings of the .feature element and come immediately after it */
.feature {
  + .heading {
    color: blue;
  }

/* targets all paragraphs that are direct children of the .feature element */
  > p {
    font-size: 1.3em;
  }
}

& নির্বাচকের সাথে সুস্পষ্ট সম্পর্ক সংজ্ঞায়িত করুন

নেস্টিং শৈলীর নিয়মগুলিকে আরও স্পষ্ট করতে আপনি & নির্বাচক ব্যবহার করতে পারেন। অভিভাবক নির্বাচকের প্রতিনিধিত্বকারী প্রতীক হিসাবে & কথা ভাবুন।

.feature {
 & button {
    color: blue;
  }
}

এটি এই মত শৈলী লেখার সমতুল্য হবে:

.feature button {
  color: blue;
}

যখন & প্রয়োজন হয়

& ছাড়া, নেস্টেড নির্বাচকরা মূল নির্বাচকের বংশধর নির্বাচক হবেন। যৌগ নির্বাচক গঠন করতে, & প্রয়োজন হয় ।

.feature {
  &:last-child {
    /* Selects the .feature element that is the :last-child, equivalent to .feature:last-child */
  }
   
  & :last-child {
    /* Selects the :last-child inside of a .feature element, equivalent to .feature :last-child */
  }

  &.highlight {
    /* Selects .feature elements that also have a .highlight class, equivalent to .feature.highlight */
  }

  & .highlight {
     /* Selects elements inside of the .feature element with the class .highlight, equivalent to .feature .highlight */
  }
}

এছাড়াও আপনি প্রসঙ্গ পরিবর্তন করতে পারেন এবং শিশু নির্বাচকের শেষে বা এর উভয় পাশে & নির্বাচক রাখতে পারেন।

/* Targets buttons with an adjacent sibling button */
button {
  & + & {
    /* … */
  }
}

img {
  .my-component & {
    /* styles for images inside of `.my-component` ... */
  }
}

শেষ উদাহরণে, আমরা .my-component ক্লাস সহ একটি উপাদানের ভিতরে চিত্রগুলির জন্য শৈলী যোগ করছি। এটি কার্যকর হতে পারে যদি আপনি এমন একটি প্রকল্পে কাজ করছেন যেখানে আপনি একটি উপাদানে একটি class বা একটি id যোগ করতে পারবেন না।

নেস্টিং এবং নির্দিষ্টতা

যেমন :is() , নেস্টিং নির্বাচক পিতা-মাতার নির্বাচক তালিকার সর্বোচ্চ নির্দিষ্টতার সাথে নির্বাচকের নির্দিষ্টতা নেয়।

#main-header,
.intro {
  & a {
    color: green;
  }
}

.intro a {
  color: blue;
}

প্রথম নিয়মটি #main-header এবং .intro উপাদানগুলির ভিতরের সমস্ত লিঙ্ককে লক্ষ্য করে, তাদের একটি সবুজ রঙ দেয়।

দ্বিতীয় নিয়মটি এটিকে ওভাররাইড করার চেষ্টা করে যাতে .intro এলিমেন্টের অভ্যন্তরে লিঙ্কগুলি নীল করা হয়।

আমরা দেখতে পারি কেন এটি কাজ করে না যদি আমরা প্রতিটি নিয়মের নির্দিষ্টতা দেখি।

/* equivalent to :is(#main-header, .intro) a with a specificity of (1, 0, 1) */
#main-header,
.intro {
  & a {
    color: green;
  }
}

/* lower specificity of (0, 1, 1) */
.intro a {
  color: blue;
}

যেহেতু প্রথম নিয়মটির নির্বাচক তালিকায় একটি id রয়েছে এবং নেস্টেড নিয়মগুলি সর্বোচ্চ নির্দিষ্টতার সাথে নির্বাচকের নির্দিষ্টতা নেয়, তাই দ্বিতীয় নিয়মের তুলনায় এটির একটি উচ্চতর নির্দিষ্টতা রয়েছে। লিঙ্কগুলি সবুজ হয় এমন a জন্যও যেগুলি #main-header সিলেক্টরের সাথে একটি উপাদানের ভিতরে নেই৷

অবৈধ নেস্টিং

:is() এর মতো, নেস্টিং নির্বাচক ছদ্ম উপাদানগুলিকে উপস্থাপন করতে পারে না।

blockquote, blockquote::before, blockquote::after {
  color: navy;

  & {
    border: 1px solid navy;
  }
}

আপনি আশা করবেন blockquote এবং এর ছদ্ম-উপাদান উভয়েরই navy রঙিন পাঠ্য এবং সীমানা থাকবে, তবে এটি এমন নয়। যেহেতু & নির্বাচক ছদ্ম-উপাদানের প্রতিনিধিত্ব করতে পারে না, তাই নেস্টেড বর্ডার শৈলী শুধুমাত্র ব্লককোটের ক্ষেত্রে প্রযোজ্য হবে।

& এবং টাইপ নির্বাচক ব্যবহার করে যৌগ নির্বাচক তৈরি করার সময়, টাইপ নির্বাচককে প্রথমে যেতে হবে এর মধ্যে কোনো হোয়াইটস্পেস ছাড়াই।

/* valid css nesting */
.feature {
  p& {
    font-weight: bold;
  }
}

/* invalid css nesting */
.feature {
  &p {
    font-weight: bold;
  }
}

এই নিয়মটি CSS নেস্টিংকে Sass-এর মতো প্রি-প্রসেসিং টুলের পাশাপাশি কাজ করার অনুমতি দেয়। Sass-এ, &p লিখলে নেস্টেড টাইপ নির্বাচকের সাথে প্যারেন্ট সিলেক্টর যুক্ত হবে এবং ফলাফল হবে .featurep ।

নেস্টিং এ-রুল

CSS শর্তসাপেক্ষ গ্রুপের নিয়ম যেমন @container , @media , @supports , এবং @layer ও নেস্ট করা যেতে পারে।

.feature {
  @media (min-width: 40em) {
    /* ... */
  }

  @container (inline-size > 900px) {
    /* ... */
  }
}

.feature {
  @supports (display: grid) {
    /* ... */
  }
}

.feature {
  @layer component {
    h2 {
      /* ... */
    }
  }
}

আপনার উপলব্ধি পরীক্ষা করুন