एक सीएसएस चयनकर्ता अंतिम दृश्य div प्राप्त करने के लिए

Question

एक मुश्किल सीएसएस चयनकर्ता सवाल, अगर यह भी संभव है पता नहीं है।

आओ हम कहते हैं कि यह HTML लेआउट है:

<div></div>
<div></div>  
<div></div>  
<div style="display:none"></div>
<div style="display:none"></div>  

मैं अंतिम का चयन करना चाहता हूं div, जो प्रदर्शित किया गया है (अर्थात। नहीं display:none) जो divदिए गए उदाहरण में तीसरा होगा । ध्यान रखें, divवास्तविक पृष्ठ पर s की संख्या भिन्न हो सकती है (यहां तक ​​कि display:none)।

Answer 1

आप इसे जावास्क्रिप्ट या jQuery के साथ चुन सकते हैं और स्टाइल कर सकते हैं, लेकिन अकेले CSS ऐसा नहीं कर सकता।

उदाहरण के लिए, यदि आपने साइट पर jQuery लागू किया है, तो आप बस कर सकते हैं:

var last_visible_element = $('div:visible:last');

यद्यपि उम्मीद है कि आपके द्वारा चुने गए विभाग के चारों ओर एक वर्ग / आईडी लिपटा होगा, जिस स्थिति में आपका कोड ऐसा दिखेगा:

var last_visible_element = $('#some-wrapper div:visible:last');

Comments

यह प्रश्न स्पष्ट रूप से नहीं "कोई JQuery CSS चयनकर्ता" कहता है, "A CSS चयनकर्ता", यह स्वीकार किया जाना चाहिए ANSWER = P

— AgelessEssence

यह वास्तव में मूल प्रश्न का उत्तर है। प्रश्नकर्ता ने कभी भी जावास्क्रिप्ट या jquery का उल्लेख नहीं किया और उन टैग को किसी अन्य उत्तरदाता द्वारा जोड़ा गया। 1nfected - क्या आप वास्तव में jQuery चाहते हैं? यदि हां, तो कृपया इसे अपने प्रश्न में रखें। अन्यथा, आपको इस उत्तर को स्वीकार करना चाहिए।

— जेपी

मुझे लगता है कि jQuery ओपी के लिए स्वीकार्य है। वह सब के बाद, स्वीकृत समाधान था।

— असली सपने

Whhyyyy पहला उत्तर allllwaaayyysss jquery है? यह सीएसएस प्रश्न का एक जावास्क्रिप्ट उत्तर है । CSS! == जावास्क्रिप्ट

— dudewad

@dewewad: पहले वाक्य का अंतिम भाग देखें: "लेकिन CSS अकेले ऐसा नहीं कर सकता है।" इसका उत्तर उस पर छोड़ सकता है, दृष्टि में कोई विकल्प नहीं है ... या एक विकल्प प्रदान करता है। लेकिन इस जवाब ने कम से कम इसकी उचित परिश्रम वास्तव में यह बताते हुए किया है कि सीएसएस वह नहीं कर सकता है जो पूछा जा रहा है (यद्यपि यह विस्तृत क्यों नहीं है )। दूसरी ओर, एक जवाब है कि बस प्रश्न के सीएसएस प्रकृति स्वीकार किए बिना एक जावास्क्रिप्ट समाधान पर बंद हो जाता है है की आलोचना के लायक।

— BoltClock

Answer 2

इस सवाल का असली जवाब है, आप ऐसा नहीं कर सकते। CSS-only उत्तरों के विकल्प इस प्रश्न के सही उत्तर नहीं हैं, लेकिन यदि JS समाधान आपके लिए स्वीकार्य हैं, तो आपको यहाँ JS या jQuery के उत्तरों में से एक को चुनना चाहिए। हालाँकि, जैसा कि मैंने ऊपर कहा, सही, सही उत्तर यह है कि आप इसे CSS में मज़बूती से नहीं कर सकते, जब तक कि आप :notऑपरेटर को [style*=display:none]अन्य और ऐसे नकारात्मक चयनकर्ताओं के साथ स्वीकार करने के लिए तैयार नहीं हैं , जो केवल इनलाइन शैलियों पर काम करता है, और एक समग्र गरीब है उपाय।

Comments

सबसे पहले, मैं आपसे सहमत हूं लेकिन मुझे लगता है कि :notऑपरेटर का उपयोग करना जैसा कि आपने कहा था कि कुछ परिस्थितियों में काम कर सकता है। उदाहरण के लिए, यह मेरी स्थिति के लिए पूरी तरह से काम करता है जहां मेरे पास जेएस सशर्त रूप से छिपने वाले तत्व हैं जो फिर इनलाइन शैलियों को जोड़ता है और इस प्रकार आपका समाधान वास्तव में पूरी तरह से काम करता है :)

— दर्जन से

ठीक है, फिर मुझे लगता है कि क्या काम करता है :) मैं सिर्फ एक आदर्शवादी हूं और मुझे यह पसंद है कि जहां चीजें सबसे अच्छी नहीं हैं, वहां यह जानना महत्वपूर्ण है कि 'हैकी' क्या है और क्या नहीं है क्योंकि यह हम सभी को बेहतर प्रोग्रामर बनाता है।

— 18 बजे

हाँ, मैं सुनता हूँ, मैं मानता हूँ कि इस समाधान का उपयोग ओपी क्वेरी के समाधान के लिए केवल सीएसएस के रूप में नहीं किया जाना चाहिए, मुझे लगता है कि जेएस के साथ संयोजन में उपयोग किए जाने पर यह बहुत अच्छी तरह से काम करता है।

— दर्जन ''

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

— योगो २१'१

Answer 3

यदि आप इनलाइन शैलियों का उपयोग कर सकते हैं, तो आप इसे शुद्ध रूप से सीएसएस के साथ कर सकते हैं।

मैं पिछले तत्व दिखाई देने पर अगले तत्व पर सीएसएस करने के लिए इसका उपयोग कर रहा हूं:

div [शैली = 'प्रदर्शन: ब्लॉक;'] + तालिका {
  फ़िल्टर: ब्लर (3px);
}

Comments

मैं इसे बदल देगा [style*='display: block']क्योंकि यह हो सकता है display: block !important;या बस <div style="display: block">:-)

— OZZIE

यह इस तरह से एक सीएसएस फ़ाइल में मेरे लिए काम करता है .btn-group > .btn.d-none + .btn(बूटस्ट्रैप के इनपुट समूहों के लिए उपयोग किया जाता है)

— जीन-चारबेल वानीयर

Answer 4

मुझे लगता है कि सीएसएस मूल्य (प्रदर्शन) द्वारा चयन करना संभव नहीं है

संपादित करें:

मेरी राय में, यह यहाँ थोड़ा jquery का उपयोग करने के लिए समझ में आता है:

$('#your_container > div:visible:last').addClass('last-visible-div');

Answer 5

शुद्ध जेएस समाधान (जैसे। जब आप अन्य चीजों के लिए jQuery या किसी अन्य ढांचे का उपयोग नहीं करते हैं और केवल इस कार्य के लिए डाउनलोड नहीं करना चाहते हैं):

<div>A</div>
<div>B</div>  
<div>C</div>  
<div style="display:none">D</div>
<div style="display:none">E</div>    

<script>
var divs = document.getElementsByTagName('div');
var last;

if (divs) {
    for (var i = 0; i < divs.length; i++) {
        if (divs[i].style.display != 'none') {
            last = divs[i];           
        }
    }
}

if (last) {
    last.style.background = 'red';
}
</script>

http://jsfiddle.net/uEeaA/90/

Comments

स्निपेट के लिए धन्यवाद, केवल गैर- jQuery उत्तर! हालाँकि, जब कई मूल तत्वों को लागू करने के लिए यह काम नहीं करता है: jsfiddle.net/uEeaA/100 - क्या आप मुझे काम करने वाले अन्य लोगों के लिए एक समाधान बनाने में मदद कर सकते हैं? मुझे इसकी आवश्यकता है, दूसरों को इसकी आवश्यकता है, इसलिए कृपया मदद करें :)

— mnsth

मुझे लगता है कि यह एक पुराना धागा है, लेकिन किसी भी भविष्य के आगंतुकों के लिए, आप कुछ कर सकते हैं jsfiddle.net/uEeaA/103

— xec

मैं चाहता था कि यह वोट आपको मिले बस b / c आपने jQuery गिरा दिया - आप पर अच्छा। मेरी एकमात्र शिकायत यह है कि एक div को कई तरीकों से छिपाया जा सकता है, न कि केवल शैली पैरामीटर के आधार पर। वास्तविक त्वरित: [1] चौड़ाई और ऊंचाई को ०, [२] में परिवर्तित किया जा सकता है, स्केल स्केल ०, [३] हो सकता है और हम इसे देखने योग्य क्षेत्र से बाहर रख सकते हैं।

— मार्कस

Answer 6

प्रयत्न

div: नहीं ([शैली * = "प्रदर्शन: कोई नहीं"])

Answer 7

दूसरे तरीके से, आप इसे जावास्क्रिप्ट के साथ कर सकते हैं, Jquery में आप कुछ इस तरह का उपयोग कर सकते हैं:

$('div:visible').last()

* reedited

Answer 8

यह सीएसएस के साथ संभव नहीं है, हालांकि आप jQuery के साथ ऐसा कर सकते हैं।

JSFIDDLE DEMO

jQuery:

$('li').not(':hidden').last().addClass("red");

HTML:

<ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li class="hideme">Item 4</li>    
</ul>

सीएसएस:

.hideme {
    display:none;
}

.red {
    color: red;
}

---

jQuery (पिछला समाधान):

var $items = $($("li").get().reverse());

$items.each(function() {

    if ($(this).css("display") != "none") {
        $(this).addClass("red");
        return false;
    }

});

Comments

यह jQuery का एक बहुत कुछ है $('li:visible:last').addClass('red')।

— एलेक्स

है ना? $('li').not(':hidden').last().addClass("red");

— मार्तीन

Answer 9

तुम अब hided तत्वों की जरूरत है, बस का उपयोग element.remove()करने के बजाय element.style.display = 'none';।

Answer 10

इसने मेरे लिए काम किया।

.alert:not(:first-child){
    margin: 30px;
}

Comments

आप सवाल का जवाब नहीं दे रहे हैं

— Serginho