सीएसएस छद्म तत्वों के संयोजन, ":" के बाद ": अंतिम-बच्चा"

122

मैं सीएसएस का उपयोग करके "व्याकरणिक रूप से सही" सूची बनाना चाहता हूं। अभी तक मेरे पास इतना ही है:

<li>टैग उनके पीछे अल्पविरामों से क्षैतिज रूप से प्रदर्शित कर रहे हैं।

li { display: inline; list-style-type: none; }

li:after { content: ", "; }

यह काम करता है, लेकिन मैं चाहता हूं कि "अंतिम बच्चे" को अल्पविराम के बजाय एक अवधि हो। और, यदि संभव हो, तो मैं "अंतिम बच्चे" से पहले "और" भी डालना चाहूंगा। जिन सूचियों को मैं स्टाइल कर रहा हूं, वे गतिशील रूप से उत्पन्न होती हैं, इसलिए मैं "अंतिम-बच्चों" को क्लास नहीं दे सकता। आप छद्म तत्वों को जोड़ नहीं सकते हैं, लेकिन यह मूल रूप से वह प्रभाव है जिसे मैं प्राप्त करना चाहता हूं।

li:last-child li:before { content: "and "; }

li:last-child li:after { content: "."; }

मैं यह काम कैसे पूरा कर सकता हूं?

css

— डेरेक
स्रोत

4

आपको वास्तव में इसके लिए css का उपयोग नहीं करना चाहिए।

— फंकी ड्यूड

2

मुझे फंकी ड्यूड से थोड़ा सहमत होना चाहिए। एचटीएमएल में ऐसा करना बेहतर होगा (या सादे HTML से अधिक होने पर कोडबाइंड करें)। CSS प्रारूपण के लिए है :)

— Zyphrax

16

मैं ... व्यक्तिगत रूप से, यह तर्क देने के लिए कि, एक सूची में, स्वरूपण एक अच्छाई है, एक आवश्यकता नहीं है। Html या सर्वर-साइड कोडिंग का उपयोग करने की तुलना में CSS के उपयोग से मामला अधिक सरल परिवर्धन या सूची से हटाने की अनुमति देता है। लेकिन मैं अजीब तरह से कभी-कभी, और, ईमानदारी से ymmv, आदि ... =)

— डेविड कहते हैं कि मोनिका

9

और ऑक्सफोर्ड कॉमा का उपयोग करने के लिए +1! :)

— ब्रैंडन रोड्स

5

"ऑक्सफोर्ड कोमा के लिए +1"। इसके बारे में कभी नहीं सुना (मैं मूल निवासी नहीं हूं)। लेकिन त्वरित विकी लुकअप यह स्वाभाविक है, क्योंकि यह कई भाषाओं में उपयोग नहीं किया गया है। अजीब बात है कि कोई स्टैक-

— गॉगलिंग

168

यह काम करता है :) (मुझे आशा है कि मल्टी-ब्राउज़र, फ़ायरफ़ॉक्स इसे पसंद करता है)

li { display: inline; list-style-type: none; }
li:after { content: ", "; }
li:last-child:before { content: "and "; }
li:last-child:after { content: "."; }

<html>
  <body>
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </body>
</html>

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

— Zyphrax
स्रोत

2

इसी तरह की समस्या वह मामला है जहां आप पाइप पात्रों के साथ मेनू आइटम को अलग कर रहे हैं। वही समाधान काम करता है। लेकिन, अंतिम पाइप चरित्र को खत्म करने के लिए अंतिम सामग्री विशेषता को {सामग्री: कोई नहीं;} पर सेट करने की आवश्यकता है।

— आर्दलेओवर

2

आदेश भी महत्वपूर्ण है। li:last-child:afterकाम करता है लेकिन li:after:last-childनहीं करता है।

— रिचर्ड अयोटे

1

ध्यान रखें कि :last-childCSS3 कल्पना से संबंधित नहीं है, इसलिए यह IE8 और पिछले संस्करणों द्वारा समर्थित नहीं है।

— Cululhu

23

मैं <मेनू> तत्वों में सूची आइटम के लिए इसे पसंद करता हूं। निम्नलिखित मार्कअप पर विचार करें:

<menu>
  <li><a href="/member/profile">Profile</a></li>
  <li><a href="/member/options">Options</a></li>
  <li><a href="/member/logout">Logout</a></li>
</menu>

मैं इसे निम्नलिखित सीएसएस के साथ शैली:

menu > li {
  display: inline;
}

menu > li::after {
  content: ' | ';
}

menu > li:last-child::after {
  content: '';
}

यह प्रदर्शित करेगा:

Profile | Options | Logout

और मार्टिन एटकिंस ने अपनी टिप्पणी पर जो समझाया उसके कारण यह संभव है

ध्यान दें कि CSS 2 में आप उपयोग करेंगे :after, नहीं ::after। यदि आप CSS 3 का उपयोग करते हैं, तो ::afterदो अर्ध-स्तंभों का उपयोग करें क्योंकि ::afterएक छद्म तत्व (छद्म वर्गों के लिए एक एकल अर्द्ध स्तंभ) है।

— गेब्रियल हाउटलोक
स्रोत

16

एक पुराना सूत्र, फिर भी कोई इससे लाभान्वित हो सकता है:

li:not(:last-child)::after { content: ","; }
li:last-child::after { content: "."; }

यह CSS3 और [अप्रयुक्त] CSS2 में काम करना चाहिए।

— user5341733
स्रोत

11

आप छद्म तत्वों को जोड़ सकते हैं! क्षमा करें दोस्तों, मैंने प्रश्न पोस्ट करने के कुछ समय बाद ही यह पता लगा लिया। शायद यह संगतता के मुद्दों के कारण कम इस्तेमाल किया जाता है।

li:last-child:before { content: "and "; }

li:last-child:after { content: "."; }

यह तैराकी का काम करता है। सीएसएस अद्भुत की तरह है।

— डेरेक
स्रोत

12

यह एक "नाइट-पिकर कोने" का एक सा है, लेकिन "अंतिम-बच्चा" वास्तव में एक छद्म वर्ग है , जबकि "पहले" और "बाद में" छद्म तत्व हैं। अंतर यह है कि एक छद्म वर्ग एक मौजूदा तत्व पर एक अतिरिक्त बाधा है, जबकि एक छद्म तत्व प्रभावी रूप से प्रस्तुति पेड़ में एक पूरी तरह से नया तत्व है जो HTML के बजाय सीएसएस में उत्पन्न हुआ था। आप इन्हें इस कारण से जोड़ सकते हैं: last-childपर एक संशोधक है li, और उसके बाद आपके द्वारा सभी liबच्चों को चुने जाने वाले सभी तत्वों को चुनने के बाद आप प्रत्येक के पहले और बाद में एक नया तत्व चुनते हैं (और स्पष्ट रूप से बनाते हैं)।

— मार्टिन एटकिन्स

मुझे पता है कि आप शायद इस विशेष सूत्र को भूल गए हैं, लेकिन जब से आपने उल्लेख किया है कि आपकी सूचियां चर लंबाई की थीं, तो यह इंगित करने के लायक है कि, अधिकांश संदर्भों में, ठीक दो वस्तुओं वाली एक सूची अंग्रेजी में अल्पविराम के साथ सही नहीं होगी। दूसरे शब्दों में, यदि आप "रोटी और मक्खन" चाहते थे। इसके बजाय "रोटी, और मक्खन।" - तब यहां दिए गए अधिकांश समाधान अधूरे होंगे। मैं इसके चारों ओर एक रास्ता लेकर आया था, और इसे एक उत्तर के रूप में नीचे पोस्ट किया था, अगर यह किसी को अभी भी धागे के नीचे देखने में मदद करता है।

— मैट वैगनर

6

बस उल्लेख करने के लिए, सीएसएस 3 में

:उपरांत

इस तरह इस्तेमाल किया जाना चाहिए

::उपरांत

से https://developer.mozilla.org/de/docs/Web/CSS/::after :

सीएसएस 3 में छद्म वर्गों और छद्म तत्वों के बीच भेदभाव स्थापित करने के लिए नोटेशन पेश किए जाने के बाद। ब्राउज़र भी संकेतन को स्वीकार करते हैं: CSS 2 में पेश किए जाने के बाद।

तो यह होना चाहिए:

li { display: inline; list-style-type: none; }
li::after { content: ", "; }
li:last-child::before { content: "and "; }
li:last-child::after { content: "."; }

— वोल्फगैंग ब्लेसन
स्रोत

3

प्रत्येक ब्राउज़र जो डबल कोलन ::CSS3 सिंटैक्स का समर्थन करता है, वह भी सिंटैक्स का समर्थन करता है :, लेकिन IE 8 केवल एकल-कोलोन का समर्थन करता है, इसलिए अभी के लिए, यह सर्वश्रेष्ठ ब्राउज़र समर्थन के लिए सिंगल-कोलोन का उपयोग करने के लिए अनुशंसित है। ::छद्म चयनकर्ताओं से छद्म सामग्री को अलग करने के लिए नया प्रारूप है। यदि आपको IE 8 समर्थन की आवश्यकता नहीं है, तो डबल-कोलन का उपयोग करने के लिए स्वतंत्र महसूस करें। इस लेख से

— जॉनीक्यू जूल

2

IE 8 अब ब्राउज़र मानकों के मामले में खिलाड़ी नहीं है। Microsoft द्वारा समर्थित नहीं है और HTML5 या CSS3 (छद्म तत्व, रूपांतर, आदि) का समर्थन नहीं करता है। मैं बैकवर्ड-कम्पैटिबिलिटी पर बहुत काम करता था, एक साल पहले तक, IE6 / IE7 पर वापस जा रहा था (के माध्यम से) Modernizr।) हमने एक लंबा रास्ता तय किया है, और यदि आप अपनी साइट के लिए अपनी ऑनलाइन पहचान को दीर्घकालिक रूप से प्रस्तुत करने का इरादा रखते हैं - इसके बिना यह एक अदूरदर्शी समाधान बन जाता है - तो बस उस राजस्व पर विचार करें जिसे आप IE8 का उपयोग करके किसी से कमाएंगे। नाडा। यहां तक कि वरिष्ठ नागरिक भी, 20 साल पीछे, अब टैबलेट और 2-इन -1 लैपटॉप का उपयोग कर रहे हैं।

— स्टीवन वेंटिमिग्लिया

2

इस सवाल का एक और जवाब जोड़ना क्योंकि मुझे ठीक उसी चीज़ की ज़रूरत थी जो @derek पूछ रही थी और मैं यहाँ जवाब देखने से पहले ही थोड़ा आगे बढ़ गया था। विशेष रूप से, मुझे सीएसएस की आवश्यकता थी जो भी हो सकता है ठीक दो सूची आइटम, जहां अल्पविराम वांछित नहीं है के मामले में के लिए खाते। एक उदाहरण के रूप में, मेरे द्वारा निर्मित कुछ लेखकों की लिखावट निम्नलिखित की तरह दिखाई देगी:

एक लेखक: By Adam Smith.

दो लेखक: By Adam Smith and Jane Doe.

तीन लेखक: By Adam Smith, Jane Doe, and Frank Underwood.

यहां पहले से दिए गए समाधान एक लेखक के लिए और 3 या अधिक लेखकों के लिए काम करते हैं, लेकिन दो लेखक मामले के लिए खाते की उपेक्षा करते हैं - जहां "ऑक्सफोर्ड कॉमा" शैली (कुछ हिस्सों में "हार्वर्ड कोमा" शैली के रूप में भी जाना जाता है) लागू नहीं होती है - यानी कंजेशन से पहले कोई कॉमा नहीं होना चाहिए।

छेड़छाड़ की एक दोपहर के बाद, मैं निम्नलिखित के साथ आया था:

<html>
 <head>
  <style type="text/css">
    .byline-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .byline-list > li {
      display: inline;
      padding: 0;
      margin: 0;
    }
    .byline-list > li::before {
      content: ", ";
    }
    .byline-list > li:last-child::before {
      content: ", and ";
    }
    .byline-list > li:first-child + li:last-child::before {
      content: " and ";
    }
    .byline-list > li:first-child::before {
      content: "By ";
    }
    .byline-list > li:last-child::after {
      content: ".";
    }
  </style>
 </head>
 <body>
  <ul class="byline-list">
   <li>Adam Smith</li>
  </ul>
  <ul class="byline-list">
   <li>Adam Smith</li><li>Jane Doe</li>
  </ul>
  <ul class="byline-list">
   <li>Adam Smith</li><li>Jane Doe</li><li>Frank Underwood</li>
  </ul>
 </body>
</html>

यह बाईलाइन को प्रदर्शित करता है जैसा कि मैंने उन्हें ऊपर दिया है।

अंत में, मुझे liतत्वों के बीच किसी भी व्हाट्सएप से छुटकारा पाने के लिए , एक झुंझलाहट के आसपास पाने के लिए: इनलाइन-ब्लॉक संपत्ति अन्यथा प्रत्येक कॉमा से पहले एक स्थान छोड़ना होगा। शायद इसके लिए एक वैकल्पिक सभ्य हैक है, लेकिन यह इस सवाल का विषय नहीं है इसलिए मैं किसी और को जवाब देने के लिए छोड़ दूँगा।

यहाँ फिडेल: http://jsfiddle.net/5REP2/

— मैट वैगनर
स्रोत

2

जैसे कुछ होना है वन, टू और थ्री आपको एक और सीएसएस स्टाइल जोड़ना चाहिए

li:nth-last-child(2):after {
    content: ' ';
}

यह दूसरे अंतिम तत्व से अल्पविराम को हटा देगा।

पूरा कोड

li {
  display: inline;
  list-style-type: none;
}

li:after {
  content: ", ";
}

li:nth-last-child(2):after {
  content: '';
}

li:last-child:before {
  content: " and ";
}

li:last-child:after {
  content: ".";
}

<html>

<body>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</body>

</html>

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

— राज शर्मा
स्रोत

0

मैं मीडिया क्वेरी में उसी तकनीक का उपयोग कर रहा हूं, जो प्रभावी रूप से बुलेट डिवाइस को छोटे उपकरणों पर इनलाइन सूची में बदल देती है क्योंकि वे अंतरिक्ष को बचाते हैं।

तो से परिवर्तन:

सूची आइटम 1
सूची आइटम 2
सूची आइटम 3

सेवा:

सूची आइटम 1; सूची आइटम 2; सूची आइटम 3।

— user3064058
स्रोत

वह सीएसएस के साथ ऐसा करने की कोशिश कर रहा है। आपकी विधि हार्ड कोडित HTML है। नेविगेशन को प्रदर्शित करने के लिए इस पद्धति का उपयोग आम तौर पर किया जाता है।

— स्पैरतन 117