এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

CSS নেস্টিং

আমাদের প্রিয় CSS প্রিপ্রসেসর ফিচারগুলোর মধ্যে একটি এখন ল্যাঙ্গুয়েজের মধ্যেই অন্তর্ভুক্ত করা হয়েছে: স্টাইল রুল নেস্টিং।

Adam Argyle

নেস্টিং করার আগে, প্রতিটি সিলেক্টরকে একে অপরের থেকে আলাদাভাবে সুস্পষ্টভাবে ঘোষণা করতে হতো। এর ফলে পুনরাবৃত্তি, স্টাইলশিটের আকার বৃদ্ধি এবং লেখার অভিজ্ঞতা অগোছালো হয়ে পড়ত।

আগে

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

নেস্টিং-এর পরেও সিলেক্টরগুলো চালিয়ে যাওয়া যায় এবং এর সাথে সম্পর্কিত স্টাইল রুলগুলোকে এর ভেতরে গ্রুপ করা যায়।

পরে

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

ব্রাউজারে এটি চেষ্টা করুন ।

নেস্টিং ডেভেলপারদের সিলেক্টরের পুনরাবৃত্তির প্রয়োজনীয়তা কমিয়ে এবং সম্পর্কিত এলিমেন্টগুলোর জন্য স্টাইল রুলগুলোকে একই স্থানে রেখে সাহায্য করে। এটি স্টাইলগুলোকে তাদের টার্গেট করা HTML-এর সাথে মেলানোর ক্ষেত্রেও সাহায্য করতে পারে। যদি পূর্ববর্তী উদাহরণের .nesting কম্পোনেন্টটি প্রজেক্ট থেকে সরিয়ে ফেলা হয়, তাহলে আপনি সম্পর্কিত সিলেক্টরের ইনস্ট্যান্সগুলো ফাইল থেকে খোঁজার পরিবর্তে পুরো গ্রুপটিই ডিলিট করে দিতে পারেন।

নেস্টিং নিম্নলিখিত বিষয়গুলিতে সাহায্য করতে পারে: - সংগঠন - ফাইলের আকার হ্রাস - রিফ্যাক্টরিং

নেস্টিং ক্রোম ১১২ থেকে পাওয়া যাচ্ছে এবং সাফারি টেকনিক্যাল প্রিভিউ ১৬২-তেও এটি ব্যবহার করে দেখা যাবে।

CSS নেস্টিং দিয়ে শুরু করা

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

ছোট ও বড় বৃত্ত, ত্রিভুজ ও বর্গক্ষেত্রের একটি রঙিন গ্রিড।

স্যান্ডবক্সের ভিতরে বৃত্ত, ত্রিভুজ এবং বর্গক্ষেত্র রয়েছে। কিছু ছোট, মাঝারি বা বড়। অন্যগুলো নীল, গোলাপী বা বেগুনি রঙের। এগুলো সবই .demo ধারণকারী এলিমেন্টের ভিতরে রয়েছে। নিচে আপনি যে HTML এলিমেন্টগুলোকে টার্গেট করবেন তার একটি প্রিভিউ দেওয়া হলো।

<div class="demo">
  <div class="sm triangle pink"></div>
  <div class="sm triangle blue"></div>
  <div class="square blue"></div>
  <div class="sm square pink"></div>
  <div class="sm square blue"></div>
  <div class="circle pink"></div>
  …
</div>

বাসা বাঁধার উদাহরণ

CSS নেস্টিং আপনাকে অন্য কোনো সিলেক্টরের প্রেক্ষাপটে একটি এলিমেন্টের জন্য স্টাইল নির্ধারণ করার সুযোগ দেয়।

.parent {
  color: blue;

  .child {
    color: red;
  }
}

এই উদাহরণে, .child ক্লাস সিলেক্টরটি .parent ক্লাস সিলেক্টরের ভেতরে নেস্ট করা আছে। এর মানে হলো, নেস্টেড .child সিলেক্টরটি শুধুমাত্র সেইসব এলিমেন্টের ক্ষেত্রেই প্রযোজ্য হবে, যেগুলো .parent ক্লাসযুক্ত এলিমেন্টের চাইল্ড।

এই উদাহরণটি বিকল্পভাবে & চিহ্ন ব্যবহার করেও লেখা যেতে পারে, যা দিয়ে স্পষ্টভাবে বোঝানো যায় যে প্যারেন্ট ক্লাসটি কোথায় স্থাপন করতে হবে।

.parent {
  color: blue;

  & .child {
    color: red;
  }
}

এই দুটি উদাহরণ কার্যগতভাবে সমতুল্য এবং এই নিবন্ধে আরও উন্নত উদাহরণ আলোচনা করা হলে আপনার কাছে বিকল্প থাকার কারণটি আরও স্পষ্ট হয়ে উঠবে।

বৃত্তগুলো নির্বাচন করা

এই প্রথম উদাহরণটির ক্ষেত্রে, কাজটি হলো ডেমোর ভেতরের শুধু বৃত্তগুলোকে ফেড ও ব্লার করার জন্য স্টাইল যোগ করা।

নেস্টিং ছাড়া , আজকের CSS:

.demo .circle {
  opacity: .25;
  filter: blur(25px);
}

নেস্টিং-এর ক্ষেত্রে দুটি বৈধ উপায় রয়েছে:

/* & is explicitly placed in front of .circle */
.demo {
  & .circle {
    opacity: .25;
    filter: blur(25px);
  }
}

অথবা

/* & + " " space is added for you */
.demo {
  .circle {
    opacity: .25;
    filter: blur(25px);
  }
}

এর ফলে , .demo ফাইলের ভেতরে .circle ক্লাসযুক্ত সমস্ত উপাদান ঝাপসা হয়ে যায় এবং প্রায় অদৃশ্য হয়ে পড়ে।

আকৃতির রঙিন গ্রিডটিতে আর বৃত্ত নেই, সেগুলো পটভূমিতে খুব আবছা। — একটি ডেমো চেষ্টা করে দেখুন

যেকোনো ত্রিভুজ এবং বর্গক্ষেত্র নির্বাচন করা

এই কাজটি করার জন্য একাধিক নেস্টেড এলিমেন্ট নির্বাচন করতে হয়, যাকে গ্রুপ সিলেক্টরও বলা হয়।

বর্তমানে CSS-এ নেস্টিং ছাড়া দুটি উপায় রয়েছে:

.demo .triangle,
.demo .square {
  opacity: .25;
  filter: blur(25px);
}

অথবা, :is() ব্যবহার করে

/* grouped with :is() */
.demo :is(.triangle, .square) {
  opacity: .25;
  filter: blur(25px);
}

নেস্টিং-এর ক্ষেত্রে , দুটি বৈধ উপায় হলো:

.demo {
  & .triangle,
  & .square {
    opacity: .25;
    filter: blur(25px);
  }
}

অথবা

.demo {
  .triangle, .square {
    opacity: .25;
    filter: blur(25px);
  }
}

এর ফলে , .demo এর ভিতরে শুধু .circle এলিমেন্টগুলোই থেকে যায়:

আকৃতিগুলোর রঙিন গ্রিডটিতে কেবল বৃত্তগুলোই অবশিষ্ট থাকে, অন্যান্য সমস্ত আকৃতি প্রায় অদৃশ্য। — একটি ডেমো চেষ্টা করে দেখুন

বড় ত্রিভুজ এবং বৃত্ত নির্বাচন করা

এই কাজটি করার জন্য একটি যৌগিক নির্বাচক প্রয়োজন, যেখানে কোনো উপাদান নির্বাচিত হওয়ার জন্য সেটিতে অবশ্যই উভয় ক্লাস উপস্থিত থাকতে হবে।

নেস্টিং ছাড়া , আজকের CSS:

.demo .lg.triangle,
.demo .lg.square {
  opacity: .25;
  filter: blur(25px);
}

অথবা

.demo .lg:is(.triangle, .circle) {
  opacity: .25;
  filter: blur(25px);
}

নেস্টিং-এর ক্ষেত্রে , দুটি বৈধ উপায় হলো:

.demo {
  .lg.triangle,
  .lg.circle {
    opacity: .25;
    filter: blur(25px);
  }
}

অথবা

.demo {
  .lg {
    &.triangle,
    &.circle {
      opacity: .25;
      filter: blur(25px);
    }
  }
}

এর ফলে , সমস্ত বড় ত্রিভুজ এবং বৃত্তগুলো .demo ফাইলের ভিতরে লুকানো থাকে:

রঙিন গ্রিডটিতে কেবল ছোট ও মাঝারি আকারের আকৃতিগুলো দৃশ্যমান। — একটি ডেমো চেষ্টা করে দেখুন

কম্পাউন্ড সিলেক্টর এবং নেস্টিং নিয়ে প্রো টিপ

এখানে & চিহ্নটি আপনার বন্ধু, কারণ এটি স্পষ্টভাবে দেখায় কীভাবে নেস্টেড সিলেক্টর যুক্ত করতে হয়। নিম্নলিখিত উদাহরণটি বিবেচনা করুন:

.demo {
  .lg {
    .triangle,
    .circle {
      opacity: .25;
      filter: blur(25px);
    }
  }
}

যদিও এটি নেস্ট করার একটি বৈধ উপায়, ফলাফল আপনার প্রত্যাশিত এলিমেন্টগুলোর সাথে মিলবে না। এর কারণ হলো .lg.triangle, .lg.circle কে একসাথে জুড়ে দিয়ে কাঙ্ক্ষিত ফলাফল নির্দিষ্ট করার জন্য & ব্যবহার না করলে, প্রকৃত ফলাফল হবে .lg .triangle, .lg .circle ; ডিসেন্ড্যান্ট সিলেক্টর .

গুরুত্বপূর্ণ বিষয়: & চিহ্ন ছাড়া ক্লাস নেস্ট করলে সর্বদা ডিসেন্ড্যান্ট সিলেক্টর তৈরি হয়। এই ফলাফল পরিবর্তন করতে & চিহ্নটি ব্যবহার করুন।

গোলাপীগুলো ছাড়া বাকি সব আকৃতি নির্বাচন করা

এই কাজটি করার জন্য একটি নেগেশন ফাংশনাল সিউডো ক্লাস প্রয়োজন, যেখানে এলিমেন্টগুলোতে নির্দিষ্ট সিলেক্টরটি থাকতে পারবে না।

নেস্টিং ছাড়া , আজকের CSS:

.demo :not(.pink) {
  opacity: .25;
  filter: blur(25px);
}

নেস্টিং-এর ক্ষেত্রে , দুটি বৈধ উপায় হলো:

.demo {
  :not(.pink) {
    opacity: .25;
    filter: blur(25px);
  }
}

অথবা

.demo {
  & :not(.pink) {
    opacity: .25;
    filter: blur(25px);
  }
}

ফলাফলস্বরূপ , যে আকৃতিগুলো গোলাপি নয়, সেগুলো .demo ফাইলের ভেতরে লুকানো থাকে:

রঙিন গ্রিডটি এখন একরঙা, এতে শুধু গোলাপি আকৃতিগুলো দেখা যাচ্ছে। — একটি ডেমো চেষ্টা করে দেখুন

নির্ভুলতা এবং নমনীয়তার সাথে `&`

ধরুন আপনি :not() সিলেক্টর ব্যবহার করে .demo টার্গেট করতে চান। তার জন্য & প্রয়োজন :

.demo {
  &:not() {
    ...
  }
}

এটি .demo এবং :not() কে একত্রিত করে .demo:not() তৈরি করে, যা পূর্ববর্তী উদাহরণের বিপরীত, যেখানে .demo :not() প্রয়োজন ছিল। যখন একটি :hover ইন্টারঅ্যাকশনকে নেস্ট করতে চাওয়া হয়, তখন এই অনুস্মারকটি অত্যন্ত গুরুত্বপূর্ণ হয়ে ওঠে।

.demo {
  &:hover {
    /* .demo:hover */
  }

  :hover {
    /* .demo :hover */
  }
}

আরও নেস্টিং উদাহরণ

নেস্টিং-এর CSS স্পেসিফিকেশনে প্রচুর উদাহরণ রয়েছে। আপনি যদি উদাহরণের মাধ্যমে সিনট্যাক্স সম্পর্কে আরও জানতে চান, তবে এতে বিভিন্ন ধরনের বৈধ ও অবৈধ উদাহরণ অন্তর্ভুক্ত রয়েছে।

পরবর্তী কয়েকটি উদাহরণে CSS নেস্টিং বৈশিষ্ট্যটি সংক্ষেপে তুলে ধরা হবে, যা আপনাকে এর কার্যকারিতার ব্যাপকতা বুঝতে সাহায্য করবে।

নেস্টিং @মিডিয়া

কোনো সিলেক্টর ও তার স্টাইল পরিবর্তনকারী মিডিয়া কোয়েরি কন্ডিশনগুলো খুঁজে বের করার জন্য স্টাইলশিটের অন্য কোনো অংশে যাওয়াটা বেশ মনোযোগ বিঘ্নকারী হতে পারে। কন্ডিশনগুলোকে সরাসরি কনটেক্সটের ভেতরে নেস্ট করার সুবিধার ফলে সেই মনোযোগ বিঘ্নকারী বিষয়টি দূর হয়ে গেছে।

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

.card {
  font-size: 1rem;

  @media (width >= 1024px) {
    font-size: 1.25rem;
  }
}

& স্পষ্টভাবে ব্যবহার করা যেতে পারে:

.card {
  font-size: 1rem;

  @media (width >= 1024px) {
    &.large {
      font-size: 1.25rem;
    }
  }
}

এই উদাহরণটি & সহ বর্ধিত সিনট্যাক্স দেখায়, এবং একই সাথে .large কার্ডগুলোকে লক্ষ্য করে দেখানো হয়েছে যে অতিরিক্ত নেস্টিং বৈশিষ্ট্যগুলোও কাজ করতে থাকে।

@rules নেস্টিং সম্পর্কে আরও জানুন।

যেকোনো জায়গায় বাসা বাঁধা

এ পর্যন্ত দেওয়া সমস্ত উদাহরণ পূর্ববর্তী কোনো প্রেক্ষাপটের ধারাবাহিকতা বা সংযোজন করেছে। প্রয়োজনে আপনি প্রেক্ষাপটটি সম্পূর্ণভাবে পরিবর্তন বা পুনর্বিন্যাস করতে পারেন।

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

& চিহ্নটি একটি সিলেক্টর অবজেক্টের (স্ট্রিং নয়) রেফারেন্স বোঝায় এবং এটি একটি নেস্টেড সিলেক্টরের যেকোনো স্থানে রাখা যেতে পারে। এমনকি এটি একাধিকবারও রাখা যায়:

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

যদিও এই উদাহরণটি দেখতে কিছুটা অকেজো মনে হতে পারে, তবুও এমন অনেক পরিস্থিতি রয়েছে যেখানে একটি সিলেক্টর কনটেক্সট পুনরাবৃত্তি করার সুবিধা পাওয়া যায়।

অবৈধ নেস্টিং উদাহরণ

কিছু নেস্টিং সিনট্যাক্স সিনারিও রয়েছে যা অবৈধ এবং আপনি যদি প্রিপ্রসেসরের মধ্যে নেস্টিং করে থাকেন, তবে তা আপনাকে অবাক করতে পারে।

নেস্টিং এবং সংযুক্তি

অনেক CSS ক্লাস নামকরণের রীতি অনুযায়ী, নেস্টিংয়ের মাধ্যমে সিলেক্টরগুলোকে স্ট্রিংয়ের মতো সংযুক্ত বা যুক্ত করা যায়। কিন্তু CSS নেস্টিংয়ে এটি কাজ করে না, কারণ সিলেক্টরগুলো স্ট্রিং নয়, বরং অবজেক্ট রেফারেন্স।

.card {
  &--header {
    /* is not equal to ".card--header" */
  }
}

আরও বিস্তারিত ব্যাখ্যা স্পেসিফিকেশনে পাওয়া যাবে।

জটিল নেস্টিং উদাহরণ

সিলেক্টর লিস্ট এবং `:is()` এর মধ্যে নেস্টিং

নিম্নলিখিত নেস্টিং CSS ব্লকটি বিবেচনা করুন:

.one, #two {
  .three {
    /* some styles */
  }
}

এটিই প্রথম উদাহরণ যা একটি সিলেক্টর লিস্ট দিয়ে শুরু হয় এবং তারপর আরও নেস্টিং করা হয়। পূর্ববর্তী উদাহরণগুলো কেবল একটি সিলেক্টর লিস্ট দিয়েই শেষ হয়েছিল। এই নেস্টিং উদাহরণটিতে কোনো ত্রুটি নেই, কিন্তু সিলেক্টর লিস্টের ভেতরে নেস্টিং করার ক্ষেত্রে একটি সম্ভাব্য জটিল বাস্তবায়নগত খুঁটিনাটি বিষয় রয়েছে, বিশেষ করে যেগুলোতে একটি আইডি সিলেক্টর অন্তর্ভুক্ত থাকে।

নেস্টিংয়ের উদ্দেশ্য সফল করার জন্য, ব্রাউজার সবচেয়ে ভেতরের নেস্টিং নয় এমন যেকোনো সিলেক্টর লিস্টকে :is() দিয়ে র‍্যাপ করে দেয়। এই র‍্যাপিং যেকোনো অথরাইজড কনটেক্সটের মধ্যে সিলেক্টর লিস্টের গ্রুপিং বজায় রাখে। এই গ্রুপিংয়ের একটি পার্শ্বপ্রতিক্রিয়া হলো :is(.one, #two) , যা বন্ধনীর ভেতরের সিলেক্টরগুলোর মধ্যে সর্বোচ্চ স্কোরের স্পেসিফিসিটি গ্রহণ করে। : :is() সবসময় এভাবেই কাজ করে , কিন্তু নেস্টিং সিনট্যাক্স ব্যবহার করার সময় এটি একটি বিস্ময়কর বিষয় হতে পারে, কারণ এটি ঠিক সেভাবে তৈরি করা হয়নি। কৌশলটির সারসংক্ষেপ হলো; আইডি এবং সিলেক্টর লিস্ট দিয়ে নেস্টিং করলে খুব উচ্চ স্পেসিফিসিটির সিলেক্টর তৈরি হতে পারে।

জটিল উদাহরণটি পরিষ্কারভাবে পুনরালোচনা করতে গেলে, পূর্ববর্তী নেস্টিং ব্লকটি ডকুমেন্টে এইভাবে প্রয়োগ করা হবে:

:is(.one, #two) .three {
  /* some styles */
}

সতর্ক থাকুন অথবা আপনার লিন্টারকে সতর্ক করতে শেখান যখন কোনো সিলেক্টর লিস্টের ভেতরে নেস্টিং করা হয় যা একটি আইডি সিলেক্টর ব্যবহার করছে, কারণ সেই সিলেক্টর লিস্টের ভেতরের সমস্ত নেস্টিংয়ের স্পেসিফিসিটি উচ্চ হবে।

নেস্টিং এবং ডিক্লারেশন মিশ্রণ

নিম্নলিখিত নেস্টিং CSS ব্লকটি বিবেচনা করুন:

.card {
  color: green;
  & { color: blue; }
  color: red;
}

.card উপাদানগুলোর রঙ blue হবে।

যেকোনো মিশ্রিত স্টাইল ডিক্লারেশনকে সবার উপরে নিয়ে আসা হয়, যেন সেগুলো কোনো নেস্টিং ঘটার আগেই লেখা হয়েছিল। এ বিষয়ে আরও বিস্তারিত তথ্য স্পেসিফিকেশনে পাওয়া যাবে।

এর থেকে বাঁচার উপায় আছে। নিচের কোডটি তিনটি কালার স্টাইলকে & এর মধ্যে রাখে, যা লেখকের উদ্দেশ্য অনুযায়ী ক্যাসকেড ক্রম বজায় রাখে। .card এলিমেন্টগুলোর রঙ লাল হবে।

.card {
  color: green;
  & { color: blue; }
  & { color: red; }
}

প্রকৃতপক্ষে, নেস্টিং-এর পরে থাকা যেকোনো স্টাইলকে একটি & দিয়ে ঘিরে দেওয়া একটি ভালো অভ্যাস।

.card {
  color: green;

  @media (prefers-color-scheme: dark) {
    color: lightgreen;
  }

  & {
    aspect-ratio: 4/3;
  }
}

বৈশিষ্ট্য সনাক্তকরণ

CSS নেস্টিং শনাক্ত করার দুটি চমৎকার উপায় আছে: সরাসরি নেস্টিং ব্যবহার করা অথবা নেস্টিং সিলেক্টরের পার্সিং ক্ষমতা যাচাই করার জন্য @supports ব্যবহার করা।

ব্রামুসের কোডপেন ডেমোর একটি স্ক্রিনশট, যেখানে জিজ্ঞাসা করা হচ্ছে আপনার ব্রাউজার CSS নেস্টিং সমর্থন করে কিনা। সেই প্রশ্নের নিচে একটি সবুজ বাক্স রয়েছে, যা সমর্থনের সংকেত দেয়।

নেস্টিং ব্যবহার করে:

html {
  .has-nesting {
    display: block;
  }

  .no-nesting {
    display: none;
  }
}

@supports ব্যবহার করে :

@supports (selector(&)) {
  /* nesting parsing available */
}

আমার সহকর্মী ব্রামুসের একটি চমৎকার কোডপেন আছে যেখানে এই কৌশলটি দেখানো হয়েছে।

ক্রোম ডেভটুলস দিয়ে ডিবাগিং

ডেভটুলস-এ নেস্টিং-এর জন্য বর্তমান সাপোর্ট খুবই সীমিত। বর্তমানে আপনি স্টাইলস প্যানে স্টাইলগুলোকে প্রত্যাশিতভাবেই দেখতে পাবেন, কিন্তু নেস্টিং এবং এর সম্পূর্ণ সিলেক্টর কনটেক্সট ট্রেস করার সুবিধা এখনও নেই। এটিকে স্বচ্ছ ও সুস্পষ্ট করার জন্য আমাদের ডিজাইন ও পরিকল্পনা রয়েছে।

ক্রোম ডেভটুলস-এর নেস্টিং সিনট্যাক্সের একটি স্ক্রিনশট।

ক্রোম ১১৩ সংস্করণে সিএসএস নেস্টিংয়ের জন্য অতিরিক্ত সাপোর্ট যুক্ত করার পরিকল্পনা রয়েছে। সাথে থাকুন।

ভবিষ্যৎ

CSS নেস্টিং বর্তমানে কেবল ভার্সন ১-এ রয়েছে। ভার্সন ২-এ আরও বেশি সিনট্যাকটিক সুগার যুক্ত করা হবে এবং সম্ভবত মুখস্থ করার মতো নিয়মকানুনও কম থাকবে। নেস্টিং পার্সিং যেন সীমাবদ্ধ না থাকে বা এতে কোনো জটিলতা না থাকে, সে বিষয়ে ব্যাপক চাহিদা রয়েছে।

নেস্টিং হলো CSS ভাষার একটি বড় উন্নতি। CSS-এর প্রায় প্রতিটি স্থাপত্যগত দিকের ওপর এর রচনাগত প্রভাব রয়েছে। সংস্করণ ২ কার্যকরভাবে নির্দিষ্ট করার আগে এই বড় প্রভাবটি গভীরভাবে অন্বেষণ ও বোঝা প্রয়োজন।

শেষ কথা হিসেবে, এখানে একটি ডেমো দেওয়া হলো যেখানে @scope , নেস্টিং এবং @layer একসাথে ব্যবহার করা হয়েছে। পুরো ব্যাপারটাই খুব রোমাঞ্চকর!

ধূসর পটভূমিতে একটি হালকা রঙের কার্ড। কার্ডটিতে একটি শিরোনাম ও লেখা, কয়েকটি অ্যাকশন বাটন এবং একটি সাইবারপাঙ্ক শৈলীর ছবি রয়েছে।

CSS নেস্টিং দিয়ে শুরু করা

বাসা বাঁধার উদাহরণ

বৃত্তগুলো নির্বাচন করা

যেকোনো ত্রিভুজ এবং বর্গক্ষেত্র নির্বাচন করা

বড় ত্রিভুজ এবং বৃত্ত নির্বাচন করা

কম্পাউন্ড সিলেক্টর এবং নেস্টিং নিয়ে প্রো টিপ

গোলাপীগুলো ছাড়া বাকি সব আকৃতি নির্বাচন করা

নির্ভুলতা এবং নমনীয়তার সাথে &

আরও নেস্টিং উদাহরণ

নেস্টিং @মিডিয়া

যেকোনো জায়গায় বাসা বাঁধা

অবৈধ নেস্টিং উদাহরণ

নেস্টিং এবং সংযুক্তি

জটিল নেস্টিং উদাহরণ

সিলেক্টর লিস্ট এবং :is() এর মধ্যে নেস্টিং

নেস্টিং এবং ডিক্লারেশন মিশ্রণ

বৈশিষ্ট্য সনাক্তকরণ

ক্রোম ডেভটুলস দিয়ে ডিবাগিং

ভবিষ্যৎ

নির্ভুলতা এবং নমনীয়তার সাথে `&`

সিলেক্টর লিস্ট এবং `:is()` এর মধ্যে নেস্টিং