सीएसएस: नहीं (: अंतिम बच्चा): चयनकर्ता के बाद

369

मेरे पास तत्वों की एक सूची है, जिन्हें इस तरह से स्टाइल किया गया है:

ul {
    list-style-type: none;
    text-align: center;
}

li {
    display: inline;
}

li:not(:last-child):after {
    content:' |';
}

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

स्निपेट का विस्तार करें

किसी को पता है कि CSS सभी अंतिम तत्व का चयन कैसे करें?

आप यहां:not() चयनकर्ता की परिभाषा देख सकते हैं

css css-selectors pseudo-element

— मैट क्लार्कसन
स्रोत

1

यह व्यवहार Chrome 10 में एक बग प्रतीत होता है। यह फ़ायरफ़ॉक्स 3.5 में मेरे लिए काम करता है।

— duri

6

वास्तव में सिर्फ नवीनतम क्रोम के साथ 2018 में स्निपेट चलाया और उम्मीद के मुताबिक काम किया।

— atoth

433

यदि यह चयनकर्ता के नहीं होने की समस्या है, तो आप उन सभी को सेट कर सकते हैं और अंतिम को ओवरराइड कर सकते हैं

li:after
{
  content: ' |';
}
li:last-child:after
{
  content: '';
}

या यदि आप पहले उपयोग कर सकते हैं, तो अंतिम-बच्चे की कोई आवश्यकता नहीं है

li+li:before
{
  content: '| ';
}

— imma
स्रोत

12

यह वास्तव में इसे IE8 (माफ करना, IE7 और पहले के लिए कोई चीता) के रूप में वापस काम करने का एकमात्र तरीका नहीं है। li:not(:first-child):beforeइंटरनेट एक्सप्लोरर के पुराने संस्करणों से निपटने के लिए थोड़ा बहुत डरावना है।

— सैंडी गिफर्ड

240

हर चीज सही लगती है। हो सकता है कि आपने जो प्रयोग किया है, उसके बजाय आप निम्नलिखित सीएसएस चयनकर्ता का उपयोग करना चाहें।

ul > li:not(:last-child):after

— विवेक
स्रोत

4

@ScottBeeson आधुनिक ब्राउजर के लिए यह सबसे अच्छा अवेयरनैस है, लेकिन पुराने ब्राउजर्स के साथ स्वीकार किए जाते हैं। (मैं आपसे सहमत हूं, यह स्वीकार किया जाना चाहिए)

— आर्थर

25

लिखित रूप में आपका उदाहरण मेरे लिए Chrome 11 में पूरी तरह से काम करता है। शायद आपका ब्राउज़र सिर्फ :not()चयनकर्ता का समर्थन नहीं करता है ?

इस क्रॉस-ब्राउज़र को पूरा करने के लिए आपको जावास्क्रिप्ट या इसी तरह के उपयोग की आवश्यकता हो सकती है। jQuery के कार्यान्वयन : इसके चयनकर्ता एपीआई में नहीं () ।

— लिजा डेली
स्रोत

8

मैंने इसे li:not(:first-child):beforeपहले ऊर्ध्वाधर पट्टी को जोड़कर और हल किया । मैं Chrome के स्थिर संस्करण के साथ काम कर रहा था जो अंतिम बच्चे का समर्थन नहीं करता है। कैनरी बिल्ड करता है। उत्तर के लिए धन्यवाद।

— मैट क्लार्कसन

लगता है कि क्रोम 2013 में भी इसका समर्थन नहीं करता है?

— मिकोको

20

CSS का उपयोग करके एक उदाहरण

  ul li:not(:last-child){
        border-right: 1px solid rgba(153, 151, 151, 0.75);
    }

— लोरेना चिता
स्रोत

20

मेरे लिए यह ठीक काम है

&:not(:last-child){
            text-transform: uppercase;
        }

— आषाढ़ नसीम
स्रोत

1

यह उत्तर CSS के बजाय SCSS से संबंधित हो सकता है।

— क्रिस वॉल्श

10

आपका नमूना मेरे लिए IE में काम नहीं करता है, आपको सामग्री CSS संपत्ति का उपयोग करने के लिए IE में अपने पृष्ठ को मानक तरीके से प्रस्तुत करने के लिए अपने दस्तावेज़ में Doctype हैडर निर्दिष्ट करना होगा :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<html>

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

</html>

दूसरा तरीका CSS 3 चयनकर्ताओं का उपयोग करना है

li:not(:last-of-type):after
{
    content:           " |";
}

लेकिन आपको अभी भी Doctype को निर्दिष्ट करने की आवश्यकता है

और तीसरा तरीका कुछ स्क्रिप्ट के साथ JQuery का उपयोग करना है जैसे कि निम्नलिखित:

<script type="text/javascript" src="jquery-1.4.1.js"></script>
<link href="style2.css" rel="stylesheet" type="text/css">
</head>
<html>

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

<script type="text/javascript">
  $(document).ready(function () {
      $("li:not(:last)").append(" | ");
    });
</script>

तीसरे तरीके का लाभ यह है कि आपको doctype निर्दिष्ट नहीं करना है और jQuery अनुकूलता का ध्यान रखेगा।

— मार्टिन कुनक
स्रोत

6

<! DOCTYPE html> नया HTML5 मानक है।

— मैट क्लार्कसन

1

इससे निपटने के लिए यह बहुत बढ़िया और आधुनिक तरीका है। मैं संघर्ष कर रहा था: आखिरी बच्चा, फिर मुझे आपका जवाब मिल गया। यह एक सही है! : नहीं (: अंतिम-प्रकार): के बाद

— फिरोज

1

निकालें: पिछले बच्चे से पहले और: के बाद और इस्तेमाल किया

 ul li:not(last-child){
 content:' |';
}

उम्मीद है, यह काम करना चाहिए

— Jaylukmann
स्रोत

-2

आप यह कोशिश कर सकते हैं, मुझे पता है कि वे उत्तर नहीं हैं जिनकी आप तलाश कर रहे हैं लेकिन अवधारणा समान है।

जहां आप सभी बच्चों के लिए स्टाइल सेट कर रहे हैं और फिर उसे पिछले बच्चे से हटा रहे हैं।

सांकेतिक टुकड़ा

li
  margin-right: 10px

  &:last-child
    margin-right: 0

छवि

— यशु मित्तल
स्रोत

2

नमस्ते, क्या मुझे पता है कि कृपया यह संपादक क्या है? यह अच्छा लगता है।

— ज़ानटेक

यह एक छोटा सा कोड है और कोई भी इसे आसानी से याद और टाइप कर सकता है।

— यशु मित्तल