html - আমি কীভাবে সিএসএস সহ প্রথম বা শেষ সন্তানের নির্বাচন করতে পারি?




css css-selectors (2)

আমি আপনাকে পরামর্শ দিচ্ছি যে আপনার কোডের মতো তারা কোনও body সন্তানের মতো একটি ধারক যুক্ত করুন এবং আপনি জানেন না যে last-child বা body first-child last-child কী তা আপনার কাছে script ট্যাগ বা অন্যান্য ট্যাগগুলির মতো অন্যান্য উপাদান থাকতে পারে যা গতিশীলভাবে যুক্ত হয়েছিল ( এখানে স্নিপেটে বা jsfiddle বা অন্য কোনও অনলাইন কোডিং সরঞ্জাম সহ)

.area {
  height: 100px;
  width: 100px;
}

.area:first-child {
  background-color: red;
}

.area:last-child {
  background-color: green;
}
<div>
  <div class="area">1</div>
  <div class="area">2</div>
  <div class="area">3</div>
  <div class="area">4</div>
</div>

আপনি যখন স্নিপেট চালাবেন তখন আপনার দেহের ভিতরে কী রয়েছে তা দেখানোর জন্য এখানে একটি স্ক্রিনশট রয়েছে:

আপনি স্পষ্টভাবে খেয়াল করতে পারেন, শেষে একটি div যুক্ত হয় যা body last-child । একটি ধারক যুক্ত করা আপনাকে এলোমেলো সেটিংস এবং যোগ করা লুকানো উপাদানগুলির সাথে ডিল করা এড়াবে।

আমি সিএসএস সহ প্রথম এবং শেষ সন্তানের নির্বাচন করতে চাই তবে এটি কার্যকর হয় না। দয়া করে আমার ফিডলটি দেখুন এবং আমাকে সহায়তা করুন:

.area {
  height: 100px;
  width: 100px;
}

.area:first-child {
  background-color: red;
}

.area:last-child {
  background-color: green;
}
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>

https://jsfiddle.net/rbw8dpsb/1/


যদি আপনি অন্য সমস্ত কাঠামোতে সেগুলি ডিভ করতে না চান তবে আপনার first-child এবং last-child first-child পরিবর্তে first-child first-of-type এবং last-of-type first-of-type ব্যবহার করা উচিত

.area {
  height: 100px;
  width: 100px;
}

.area:first-of-type {
  background-color: red;
}

.area:last-of-type {
  background-color: green;
}
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>

যেমন বলেছিলেন, এই সমাধানটি স্বেচ্ছাচারিত এবং সমস্ত পরিস্থিতিতে কাজ নাও করতে পারে। যেমন দেখানো হয়েছে, এটি কোড স্নিপেটে সঠিকভাবে কাজ করছে না তবে এটি উদাহরণস্বরূপ জেএসফিডেলে করে। আইই https://jsfiddle.net/vm1scerv/





css-selectors