আমি শেষ সন্তানের বাদে কীভাবে কোনও উপাদানটির সমস্ত বাচ্চাকে বেছে নিতে পারি?

Question

CSS3 সিলেক্টর ব্যবহার করে আমি কীভাবে সর্বশেষ সন্তানের বাইরে নির্বাচন করব?

উদাহরণস্বরূপ, শুধুমাত্র শেষ সন্তানের পেতে হবে div:nth-last-child(1)।

Answer 1

আপনি ব্যবহার করতে পারেন অস্বীকৃতি সিউডো-বর্গ:not() বিরুদ্ধে :last-childছদ্ম-বর্গ । সিএসএস নির্বাচক স্তর 3 প্রবর্তিত হওয়ায় এটি IE8 বা নীচে কাজ করে না:

:not(:last-child) { /* styles */ }

Comments

এটি যেমন-তে ব্যবহৃত হয়? প্রথম কোলনের আগে কিছু না থাকলে?

— জননী কেন

আপনি এটি আপনার সাধারণ বেস সিলেক্টরের সাথে যুক্ত করতে পারেন ( divওপি উদাহরণে)

— ডালাস

SASS ব্যবহারকারীদের জন্য, আপনি &:not(:last-child) { /* styles * }যে উপাদানটি প্রভাবিত করতে চান তার অভ্যন্তরটি ব্যবহার করতে পারেন।

— মার্টিন জেমস

Answer 2

এটাকে সহজ করো:

আপনি সমস্ত স্টাডিতে আপনার স্টাইলটি প্রয়োগ করতে পারেন এবং সর্বশেষের সাথে শেষটি পুনরায় আরম্ভ করতে পারেন : শেষ সন্তান :

সিএসএসে উদাহরণস্বরূপ :

.yourclass{
    border: 1px solid blue;
}
.yourclass:last-child{
    border: 0;
}

বা এসসিএসএসে :

.yourclass{
    border: 1px solid rgba(255, 255, 255, 1);
    &:last-child{
        border: 0;
    }
}

• পড়তে / মনে রাখা সহজ
• দ্রুত কার্যকর করা
• ব্রাউজার সুসংগত (IE9 + যেহেতু এটি এখনও CSS3)

Comments

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

— আলেকজান্ডার বার্ড

এটি কাজ করতে পারে তবে সমস্যাটি যখন আপনার অনেকগুলি CSS স্টাইলের মতো (সীমানা, রঙ, ফন্ট-আকার ইত্যাদি) থাকে তখন আপনাকে সিএসএস স্টাইলটি আবার শুরু করতে হবে: শেষ সন্তানের। সুতরাং উপযুক্ত সমাধানটি ব্যবহার করছে: নয় (: সর্বশেষ শিশু)

— davecar21

Answer 3

নিক ক্র্যাভারের সমাধান কাজ করে তবে আপনি এটি ব্যবহার করতে পারেন:

:nth-last-child(n+2) { /* Your code here */ }

সিএসএস ট্রিকসের ক্রিস কৌইয়ার এটির জন্য একটি দুর্দান্ত : নবম পরীক্ষক করেছিলেন।

Comments

মজিলার একটি ভাল সংজ্ঞা রয়েছে : নবম-সর্বশেষ-শিশু

— ক্লিন্ট পাচল

কিছু লোক বলে যে :notসিউডো খুব ব্যয়বহুল। সুতরাং এটি যেখানে সম্ভব সেখানে এড়ানোর চেষ্টা করা ভাল ধারণা হতে পারে।

— নিউরোট্রান্সমিটার

Answer 4

আইআই 9 এলে এটি সহজ হবে। যদিও অনেক সময় আপনি সমস্যাটির প্রয়োজনের সাথে স্যুইচ করতে পারেন: প্রথম-শিশু এবং উপাদানটির বিপরীত দিকটি স্টাইল করুন (আই 7 +)।

Answer 5

এর মাধ্যমে ব্যবহার নিক craver এর সমাধান selectivizr একটি ক্রস ব্রাউজার সমাধান জন্য করতে পারবেন (IE6 + +)

Answer 6

শেষ থেকে উপাদানগুলি সন্ধান করতে, ব্যবহার করুন

<style>
ul li:nth-last-of-type(3n){ color:#a94442}  /**/
</style>

Answer 7

নিক ক্র্যাভারের সমাধানটি আমাকে যা প্রয়োজন তা দিয়েছিল তবে সিএসএস-ইন-জেএস ব্যবহারকারীদের জন্য এটি স্পষ্ট করে তুলতে:

const styles = {
  yourClass: {
    /* Styles for all elements with this class */
    '&:not(:last-child)': {
      /* Styles for all EXCEPT the last element with this class */
    },
  },
};

Answer 8

.nav-menu li:not(:last-child){
    // write some style here
}

এই কোডটি সবার কাছে স্টাইল প্রয়োগ করা উচিত

শেষ সন্তান বাদে