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




css css-selectors (2)

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

.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/


আমি আপনাকে পরামর্শ দিচ্ছি যে আপনার কোডের মতো তারা কোনও 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 । একটি ধারক যুক্ত করা আপনাকে এলোমেলো সেটিংস এবং যোগ করা লুকানো উপাদানগুলির সাথে ডিল করা এড়াবে।





css-selectors