मैं अंतिम बच्चे को छोड़कर किसी तत्व के सभी बच्चों का चयन कैसे कर सकता हूं?

371

मैं CSS3 चयनकर्ताओं का उपयोग करके सभी अंतिम बच्चे का चयन कैसे करूंगा?

उदाहरण के लिए, केवल अंतिम बच्चा पाने के लिए div:nth-last-child(1)।

css-selectors css

689

आप उपयोग कर सकते हैं निषेध छद्म वर्ग:not() के खिलाफ :last-childछद्म वर्ग । CSS चयनकर्ता स्तर 3 को पेश किया जा रहा है, यह IE8 या उससे नीचे में काम नहीं करता है:

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

— निक क्रेवर
स्रोत

यह के रूप में प्रयोग किया जाता है? पहले कोलन के बिना कुछ भी?

— जॉनी क्यों

आप इसे अपने सामान्य आधार चयनकर्ता ( divओपी उदाहरण में)

— डलास

2

SASS का उपयोग करने वालों के लिए, आप &:not(:last-child) { /* styles * }उस तत्व का उपयोग कर सकते हैं जिसे आप प्रभावित करना चाहते हैं।

— मार्टिन जेम्स

100

इसे सरल बनाओ:

आप अपनी शैली को सभी div पर लागू कर सकते हैं और पिछले वाले को पुन: प्रारंभ कर सकते हैं : अंतिम-बच्चा :

CSS में उदाहरण के लिए :

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

या SCSS में :

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

पढ़ने / याद करने में आसान
तेजी से निष्पादित करने के लिए
ब्राउज़र संगत (IE9 + क्योंकि यह अभी भी CSS3 है)

— सेबस्टियन होरिन
स्रोत

6

मेरे लिए कम से कम, यह एक बुरा कोड गंध है। आप जान-बूझकर एक css नियम को ऐसे तत्व पर लागू कर रहे हैं जिसे आप नहीं चाहते हैं, केवल तब ही इसे नष्ट करने के लिए दूसरी परत को केक बनाने की कोशिश करें। मेरे लिए, यह एक बुरा कोड गंध है। मुझे डर है कि सीएसएस को बनाए रखने के लिए सीएसएस कोडिंग कठिन और कठिन हो सकती है। दूसरे शब्दों में, आप स्पेगेटी कोड css का निर्माण कर रहे हैं।

— अलेक्जेंडर बर्ड

1

यह भी काम कर सकता है लेकिन समस्या यह है कि जब आपके पास कई सीएसएस शैली होती हैं जैसे (सीमा, रंग, फ़ॉन्ट-आकार आदि) तो आपको सीएसएस शैली को फिर से शुरू करने की आवश्यकता होगी: अंतिम-बच्चा। तो उपयुक्त समाधान का उपयोग कर रहा है: नहीं (: पिछले बच्चे)

— davecar21

33

निक क्रेवर का समाधान काम करता है लेकिन आप इसका उपयोग भी कर सकते हैं:

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

CSS ट्रिक्स के क्रिस कॉयियर ने इसके लिए एक अच्छा : nth टेस्टर बनाया ।

— रॉबिन बी
स्रोत

मोज़िला की अच्छी परिभाषा है : nth-last-child

— क्लिंट पचल

1

कुछ लोग कहते हैं कि :notछद्म बहुत महंगा है। इसलिए जहां संभव हो वहां से बचने की कोशिश करना एक अच्छा विचार हो सकता है।

— न्यूरोट्रांसमीटर

22

जब IE9 आता है, तो यह आसान हो जाएगा। बहुत समय हालांकि, आप समस्या को एक के लिए स्विच कर सकते हैं: पहला-बच्चा और तत्व के विपरीत पक्ष (IE7) शैली।

— निकोलस विल्सन
स्रोत

10

साथ का उपयोग करते हुए निक craver के समाधान selectivizr एक क्रॉस ब्राउज़र समाधान के लिए अनुमति देता है (IE6 +)

— डेल्फी
स्रोत

1

पिछले से तत्वों को खोजने के लिए, का उपयोग करें

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

— अविनाश मल्होत्रा
स्रोत

1

निक क्रेवर के समाधान ने मुझे वह दिया जो मुझे आवश्यक था लेकिन सीएसएस-इन-जेएस का उपयोग करने वालों के लिए इसे स्पष्ट करने के लिए:

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

— maddRobot
स्रोत

1

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

इस कोड को शैली को सभी पर लागू करना चाहिए

आखिरी बच्चे को छोड़कर

— RyanGonzalezUSA
स्रोत