नहीं: पहला बच्चा चयनकर्ता

Question

मेरे पास एक divटैग है जिसमें कई ulटैग हैं।

मैं ulकेवल पहले टैग के लिए CSS गुण सेट करने में सक्षम हूं :

div ul:first-child {
    background-color: #900;
}

हालाँकि, मेरे पहले प्रयास के ulअलावा एक दूसरे टैग के लिए सीएसएस गुण सेट करने के लिए मेरे निम्नलिखित प्रयास :

div ul:not:first-child {
    background-color: #900;
}

div ul:not(:first-child) {
    background-color: #900;
}

div ul:first-child:after {
    background-color: #900;
}

मैं CSS में कैसे लिख सकता हूं: "प्रत्येक तत्व, पहले को छोड़कर"?

Answer 1

संस्करणों आप पोस्ट में से एक वास्तव में काम करता है सभी आधुनिक ब्राउज़रों (जहां के लिए CSS चयनकर्ताओं का स्तर 3 रहे हैं समर्थित ):

div ul:not(:first-child) {
    background-color: #900;
}

यदि आपको विरासत ब्राउज़रों का समर्थन करने की आवश्यकता है, या यदि आप :notचयनकर्ता की सीमा से बाधित हैं (यह केवल एक सरल चयनकर्ता को एक तर्क के रूप में स्वीकार करता है ) तो आप दूसरी तकनीक का उपयोग कर सकते हैं:

एक नियम को परिभाषित करें जिसमें आपके द्वारा इरादा किए जाने की तुलना में अधिक गुंजाइश है और फिर इसे सशर्त रूप से "रद्द" करें, इसके दायरे को सीमित करें जो आप चाहते हैं:

div ul {
    background-color: #900;  /* applies to every ul */
}

div ul:first-child {
    background-color: transparent; /* limits the scope of the previous rule */
}

दायरा सीमित करते समय प्रत्येक सीएसएस विशेषता के लिए डिफ़ॉल्ट मान का उपयोग करें जिसे आप सेट कर रहे हैं।

Comments

क्या आप वास्तव में जानते हैं कि यह किन संस्करणों पर समर्थित नहीं है?

— सिमोन_विवर

@Simon_Weaver: व्यवहार में सब कुछ लेकिन IE <9 इसका समर्थन करता है। इस तरह की जानकारी प्राप्त करने के लिए एक महान संसाधन caniuse.com है ।

— जॉन

हम्म .. पहले समाधान के प्रतिबंधों के लिए बाहर देखो: caniuse.com/#feat=css-not-sel-list दूसरा मेरे लिए अधिक उचित लग रहा था। धन्यवाद!

— इरो

@iorrah आपका कैन्य्यूज़ लिंक चयनकर्ताओं की सूची के लिए है, और हाँ, समर्थन अभी भी बहुत सीमित है। ओपी चयनकर्ताओं की सूची का उपयोग नहीं कर रहा है। इसलिए मुझे लगता है कि IE8 के दिनों से परे महान समर्थन के साथ https://caniuse.com/#feat=css-sel3 अधिक उपयुक्त है।

— गुप्तवार्ता

क्रोम में शुरुआत में यह दिव्य तत्व के बिना भी काम करता है।

— अचराफ जेडए

Answer 2

यह CSS2 समाधान ("किसी भी ulबाद ul") काम करता है, भी, और अधिक ब्राउज़रों द्वारा समर्थित है।

div ul + ul {
  background-color: #900;
}

इसके विपरीत :notऔर :nth-sibling, आसन्न भाई चयनकर्ता IE7 + द्वारा समर्थित है।

यदि आपके पास पृष्ठ लोड होने के बाद जावास्क्रिप्ट में ये गुण हैं, तो आपको इस के IE7 और IE8 कार्यान्वयन में कुछ ज्ञात बगों को देखना चाहिए । इस लिंक को देखें ।

किसी भी स्थिर वेब पेज के लिए, यह पूरी तरह से काम करना चाहिए।

Comments

@Leven: उस quirksmode लिंक का कहना है कि इसे IE7 में काम करना चाहिए, लेकिन केवल वैधानिक रूप से। यदि आपका JS इसके सामने एक और तत्व रखता है, तो इसे सही तरीके से अपडेट नहीं किया जा सकता है। क्या यह मुद्दा आपने देखा है?

— एलेक्स क्विन

ध्यान देने योग्य हो सकता है कि तत्वों के अनुक्रम में: ul ul div ul(जहां ये तत्व भाई-बहन हैं), केवल दूसरे ul को ही चुना जाएगा, क्योंकि पिछले एक के पास ulखुद का पिछला नहीं है

— Brian H.

Answer 3

चूंकि IE6-8:not द्वारा स्वीकार नहीं किया गया है , मैं आपको यह सुझाव दूंगा :

div ul:nth-child(n+2) {
    background-color: #900;
}

इसलिए आप पहले वाले को छोड़करul इसके मूल तत्व में से प्रत्येक को चुनें ।

अधिक उदाहरणों के लिए क्रिस कॉयर के "उपयोगी: एनटीएच-चाइल्ड व्यंजनों" लेख का संदर्भ लें ।nth-child

Comments

जो वास्तव में अभी भी 2019 में IE6-8 का उपयोग करता है?

— ओल्डबॉय

जवाब मानते हुए 2013 से था?

— आसुकीसुकी '’

Answer 4

div li~li {
    color: red;
}

IE7 का समर्थन करता है

Answer 5

not(:first-child)अब काम नहीं लगता। कम से कम क्रोम और फ़ायरफ़ॉक्स के अधिक हाल के संस्करणों के साथ।

इसके बजाय, यह प्रयास करें:

ul:not(:first-of-type) {}

Comments

वे दोनों काम करते हैं, लेकिन उनके अलग अर्थ हैं। ul:not(:first-child)का शाब्दिक अर्थ है "कोई भी ulतत्व जो अपने माता-पिता का पहला बच्चा नहीं है", इसलिए यह 1 से भी मेल नहीं खाएगा ulयदि यह किसी अन्य तत्व ( p, शीर्षक आदि) से पहले हो। इसके विपरीत, ul:not(:first-of-type)" कंटेनर में ul1 को छोड़कर किसी भी तत्व " का अर्थ है ul। आप सही कह रहे हैं कि ओपी को शायद बाद के व्यवहार की आवश्यकता थी, लेकिन आपका स्पष्टीकरण भ्रामक है।

— इल्या स्ट्रेल्टसिन

Answer 6

आप किसी भी चयनकर्ता का उपयोग कर सकते हैं not

p:not(:first-child){}
p:not(:first-of-type){}
p:not(:checked){}
p:not(:last-child){}
p:not(:last-of-type){}
p:not(:first-of-type){}
p:not(:nth-last-of-type(2)){}
p:not(nth-last-child(2)){}
p:not(:nth-child(2)){}

Answer 7

मैं ऊपर के कुछ के साथ किस्मत नहीं था,

यह केवल वही था जो वास्तव में मेरे लिए काम करता था

ul:not(:first-of-type) {}

यह मेरे लिए तब काम आया जब मैं पृष्ठ पर पहले बटन को प्रदर्शित करने की कोशिश कर रहा था, जिसे मार्जिन-बाएं विकल्प से प्रभावित नहीं किया गया।

यह वह विकल्प था जिसे मैंने पहले आज़माया था लेकिन यह काम नहीं किया

ul:not(:first-child)

Answer 8

आप अपने चयनकर्ता का उपयोग उस :notतरह कर सकते हैं जैसे कि आप किसी भी चयनकर्ता का उपयोग कर सकते हैं:not()

any_CSS_selector:not(any_other_CSS_selector){
    /*YOUR STYLE*/
}

आप :notमाता-पिता के चयनकर्ता के बिना भी उपयोग कर सकते हैं ।

   :not(:nth-child(2)){
        /*YOUR STYLE*/
   }

और ज्यादा उदाहरण

any_CSS_selector:not(:first-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:checked){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-of-type(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-child(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-child(2)){
    /*YOUR STYLE*/
}

Answer 9

जैसा कि मैंने इस्तेमाल किया ul:not(:first-child)एक सही समाधान है।

div ul:not(:first-child) {
    background-color: #900;
}

यह सही क्यों है क्योंकि उपयोग करके ul:not(:first-child), हम सीएसएस को आंतरिक तत्वों पर लागू कर सकते हैं। जैसे li, img, span, aटैग आदि।

लेकिन जब दूसरों के समाधान का इस्तेमाल किया:

div ul + ul {
  background-color: #900;
}

तथा

div li~li {
    color: red;
}

तथा

ul:not(:first-of-type) {}

तथा

div ul:nth-child(n+2) {
    background-color: #900;
}

ये केवल उलटे स्तर CSS को प्रतिबंधित करते हैं। मान लीजिए कि हम CSS liको 'div ul + ul li' के रूप में लागू नहीं कर सकते ।

आंतरिक स्तर के तत्वों के लिए पहला समाधान पूरी तरह से काम करता है।

div ul:not(:first-child) li{
        background-color: #900;
    }

और इसी तरह ...