क्या मेरे पास कई हो सकते हैं: एक ही तत्व के लिए छद्म तत्व से पहले?

Question

क्या :beforeएक ही तत्व के लिए कई छद्म होना संभव है ?

.circle:before {
    content: "\25CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

मैं उपरोक्त शैलियों को jQuery का उपयोग करके एक ही तत्व पर लागू करने का प्रयास कर रहा हूं, लेकिन केवल सबसे हाल ही में लागू किया गया है, दोनों कभी नहीं।

Answer 1

CSS2.1 में, एक तत्व किसी भी समय किसी भी तरह के छद्म तत्व के अधिकांश भाग में हो सकता है। (इसका मतलब है कि एक तत्व में एक :beforeऔर एक :afterछद्म तत्व दोनों हो सकते हैं - यह सिर्फ एक दूसरे से अधिक नहीं हो सकता है)।

नतीजतन, जब आपके पास एक :beforeही तत्व से मेल खाने वाले कई नियम होते हैं, तो वे सभी कैस्केड :beforeकरेंगे और एक सामान्य तत्व के साथ एक ही छद्म तत्व पर लागू होंगे । आपके उदाहरण में, अंतिम परिणाम इस तरह दिखता है:

.circle.now:before {
    content: "Now";
    font-size: 19px;
    color: black;
}

जैसा कि आप देख सकते हैं, केवल वही contentघोषणा जिसमें सबसे अधिक पूर्वता है (जैसा कि उल्लेख किया गया है, जो अंतिम आता है) प्रभावी होगा - बाकी घोषणाओं को छोड़ दिया जाता है, जैसा कि किसी अन्य सीएसएस संपत्ति के साथ होता है।

यह व्यवहार CSS2.1 के चयनकर्ताओं अनुभाग में वर्णित है :

छद्म तत्व सीएसएस में वास्तविक तत्वों की तरह ही व्यवहार करते हैं, नीचे वर्णित अपवादों के साथ और अन्य जगहों पर।

तात्पर्य यह है कि छद्म तत्वों वाले चयनकर्ता सामान्य तत्वों के लिए चयनकर्ताओं की तरह काम करते हैं। इसका मतलब यह भी है कि कैस्केड को उसी तरह काम करना चाहिए। अजीब बात है, CSS2.1 केवल संदर्भ प्रतीत होता है; न तो सीएसएस 3-चयनकर्ताओं और न ही सीएसएस 3-कैस्केड ने इसका उल्लेख किया है, और यह देखा जाना बाकी है कि क्या भविष्य के विनिर्देश में इसे स्पष्ट किया जाएगा।

यदि कोई तत्व एक ही छद्म तत्व के साथ एक से अधिक चयनकर्ता से मेल खा सकता है, और आप चाहते हैं कि वे सभी किसी भी तरह से लागू हों, तो आपको संयुक्त चयनकर्ताओं के साथ अतिरिक्त CSS नियम बनाने होंगे, ताकि आप यह निर्दिष्ट कर सकें कि ब्राउज़र को उन में क्या करना चाहिए मामलों। मैं contentयहाँ संपत्ति सहित एक पूर्ण उदाहरण प्रदान नहीं कर सकता , क्योंकि यह उदाहरण के लिए स्पष्ट नहीं है कि प्रतीक या पाठ पहले आना चाहिए। लेकिन इस संयुक्त नियम के लिए आपको जिस चयनकर्ता की आवश्यकता है, .circle.now:beforeया .now.circle:beforeजो भी चयनकर्ता है, वह आपकी व्यक्तिगत पसंद है क्योंकि दोनों चयनकर्ता समान हैं, यह केवल उस contentसंपत्ति का मूल्य है जिसे आपको खुद को परिभाषित करने की आवश्यकता होगी।

यदि आपको अभी भी एक ठोस उदाहरण की आवश्यकता है, तो इस तरह के प्रश्न के बारे में मेरा उत्तर देखें ।

विरासत css3- सामग्री विनिर्देश में::before::after CSS2.1 झरना के साथ संगत एक संकेतन का उपयोग करते हुए कई और छद्म तत्वों को सम्मिलित करने पर एक अनुभाग होता है , लेकिन ध्यान दें कि वह विशेष दस्तावेज़ अप्रचलित है - यह 2003 से अपडेट नहीं किया गया है, और किसी के पास नहीं है पिछले एक दशक में उस सुविधा को लागू किया। अच्छी खबर यह है कि छोड़ दिया दस्तावेज़ सक्रिय रूप से सीएसएस-सामग्री -3 और सीएसएस-छद्म -4 की आड़ में एक फिर से लिखना है । बुरी खबर यह है कि कई छद्म तत्वों की विशेषता कहीं भी या तो विनिर्देशन में नहीं पाई जा सकती है, संभवत: कार्यान्वयनकर्ता की रुचि के अभाव में, फिर से।

Comments

दिए गए मामले में, यदि कोई तत्व वर्ग circleऔर वर्ग दोनों के अंतर्गत आता है now, तो दोनों नियम तत्व के :beforeछद्म तत्व पर लागू होते हैं , लेकिन सामान्य सीएसएस का अर्थ है कि contentसेटिंग्स में से केवल एक ही प्रभावी हो सकती है (सामान्य कैस्केड नियमों द्वारा)। मुद्दा यह है कि contentजमा नहीं होता है।

— जुक्का के। कोर्पेला

पता चला है इस सवाल है कि मैं कई महीनों के बाद जवाब इस एक का डुप्लिकेट है। मैंने तब से अधिकांश जानकारी को दूसरे उत्तर से मर्ज कर दिया है, जो मूल रूप से @Jukka ने ऊपर बताई गई सभी बातों पर विस्तार से बताई है, क्योंकि यह पहले से कहीं अधिक ट्रैफ़िक प्राप्त कर रही है।

— BoltClock

13 साल बाद, css-content-3 ड्राफ्ट आखिरकार अपडेट कर दिया गया है । छद्म तत्व अनुभाग को निश्चित रूप से css-pseudo-4 के पक्ष में हटा दिया गया है, जो एकाधिक ::beforeया ::afterछद्म तत्वों की अनुमति नहीं देता है ।

— ओरिऑल

@ ओरियल: 12 साल, वास्तव में। css-pseudo-4 का FPWD पिछले साल पेश किया गया था, जिस समय css-content-3 को पहले से ही नए स्पेस की ओर इंगित करने के लिए अपडेट कर दिया गया था।

— BoltClock

@BoltClock कुछ समय पहले draft.csswg.org पर css-content-3 संपादक के मसौदे को अपडेट किया गया था, लेकिन w3.org पर काम करने का मसौदा अभी भी 2003 तक हाल ही में एक था। मुझे अभी भी कुछ उम्मीदें थीं ...

— ओरोल

Answer 2

यदि आपके मुख्य तत्व में कुछ बाल तत्व या पाठ हैं, तो आप इसका उपयोग कर सकते हैं।

अपने मुख्य तत्व को सापेक्ष (या निरपेक्ष / स्थिर) स्थिति में रखें और दोनों का उपयोग करें: पहले और: पूर्ण के बाद (मेरी स्थिति में इसे निरपेक्ष होना चाहिए था, आपके बारे में नहीं पता है)।

अब यदि आप एक और छद्म तत्व चाहते हैं, तो एक पूर्ण संलग्न करें: मुख्य तत्व के बच्चों में से एक से पहले (यदि आपके पास केवल पाठ है, तो इसे एक अवधि में रखें, अब आपके पास एक तत्व है), जो सापेक्ष / निरपेक्ष / निश्चित नहीं है ।

यह तत्व ऐसे काम करना शुरू कर देगा जैसे उसका मालिक आपका मुख्य तत्व है।

एचटीएमएल

<div class="circle">
    <span>Some text</span>
</div>

सीएसएस

.circle {
    position: relative; /* or absolute/fixed */
}

.circle:before {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

.circle:after {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

.circle span {
    /* not relative/absolute/fixed */
}

.circle span:before {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

Comments

जबकि चयनित उत्तर सटीक है, यह मेरे मामले के लिए एक व्यवहार्य कार्य था। मैं डोम में अधिक नोड्स जोड़ने की आवश्यकता के बिना कई psuedo तत्वों होने का अनुकरण करने में सक्षम था!

— मैट.काफमैन

@ Matt.kauffman23 इसलिए, क्या आप बता सकते हैं कि आपने कैसे अनुकरण किया?

— BbIKTOP

@BbIKTOP क्षमा करें अभी आपकी टिप्पणी देखी है। मेरे मामले में मैं एक ऐसे मोडल पर काम कर रहा था जिसमें हमेशा बच्चे थे इसलिए मैं कुछ इस तरह से समाप्त हुआ:.modal:first-child:before { …

— Matt.kauffman23

@ Matt.kauffman23 6 से अधिक वर्षों के बाद इस तरह से एक विस्तार याद करने के लिए, आपके पास एक महान स्मृति है!

— क्रिसडोनी

Answer 3

मैंने इसका उपयोग करके हल किया है:

.element:before {
    font-family: "Font Awesome 5 Free" , "CircularStd";
    content: "\f017" " Date";
}

आइकन के लिए फ़ॉन्ट परिवार "फ़ॉन्ट भयानक 5 मुक्त" का उपयोग करना, और उसके बाद, हमें उस फ़ॉन्ट को निर्दिष्ट करना होगा जिसे हम फिर से उपयोग कर रहे हैं क्योंकि यदि हम ऐसा नहीं करते हैं, तो नेविगेटर डिफ़ॉल्ट फ़ॉन्ट (कई बार नए रोमन या कुछ और) का उपयोग करेगा यह)।