সর্বশেষ দৃশ্যমান ডিভ পেতে একটি সিএসএস নির্বাচক

Question

একটি জটিল সিএসএস নির্বাচক প্রশ্ন, এটি এমনকি সম্ভব কিনা তাও জানেন না।

এটি এইচটিএমএল লেআউট বলে দিন:

<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 দিয়ে এটি নির্বাচন এবং স্টাইল করতে পারেন, তবে সিএসএস একা এটি করতে পারে না।

উদাহরণস্বরূপ, আপনি যদি jQuery সাইটে প্রয়োগ করেন তবে আপনি কেবল এটি করতে পারেন:

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

যদিও আশা করি আপনি যে বিভাগটি নির্বাচন করছেন তার চারপাশে আপনার একটি শ্রেণি / আইডি আবৃত থাকবে, সেক্ষেত্রে আপনার কোডটি দেখতে দেখতে এমন হবে:

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

Comments

প্রশ্নটি স্পষ্টভাবে কোনও "একটি জ্যাকিউরি সিএসএস নির্বাচনকারী" বলে না, "এ সিএসএস নির্বাচনকারী" বলেছেন, এটি গ্রহণযোগ্য উত্তর হতে হবে = পি

— এজলেস উপস্থিতি

এটি প্রকৃতপক্ষে মূল প্রশ্নের উত্তর। প্রশ্নকর্তা কখনও জাভাস্ক্রিপ্ট বা jquery উল্লেখ করেনি এবং এই ট্যাগগুলি অন্য উত্তরদাতা দ্বারা যুক্ত করা হয়েছিল। 1nfected - আপনি কি আসলে jQuery চান? যদি তা হয় তবে দয়া করে এটি আপনার প্রশ্নের মধ্যে রাখুন। অন্যথায়, পরিবর্তে আপনার এই উত্তরটি গ্রহণ করা উচিত।

— জেপ

আমি মনে করি jQuery ওপিতে গ্রহণযোগ্য। সর্বোপরি এটি ছিল গৃহীত সমাধান।

— পরাবাস্তব স্বপ্নগুলি

অললওয়াআয়াইসস জিকিউরি প্রথম উত্তরটি কার? এটি একটি সিএসএস প্রশ্নের জাভাস্ক্রিপ্ট উত্তর । সিএসএস! == জাভাস্ক্রিপ্ট

— ডুয়াদওয়াদ

@ দুদেওয়াদ: প্রথম বাক্যটির শেষ অংশটি দেখুন: "তবে সিএসএস একা এটি করতে পারে না।" উত্তরটি এটিকে ছেড়ে দিতে পারে, বিকল্পের দৃষ্টিতে ... বা বিকল্প সরবরাহ করতে পারে। তবে এই উত্তরটি অন্ততপক্ষে যথাযথ পরিশ্রম করে বলেছে যে সিএসএস যা চাওয়া হচ্ছে তা করতে পারে না (তবে এটি কেন বিস্তৃত নয় )। অন্যদিকে, একটি উত্তর যে শুধু প্রশ্নই সিএসএস প্রকৃতি স্বীকার ছাড়া একটি জাভাস্ক্রিপ্ট সমাধানে যায় বন্ধ হয় সমালোচনা মূল্য।

— বোল্টক্লক

Answer 2

এই প্রশ্নের আসল উত্তর হ'ল আপনি এটি করতে পারবেন না। কেবলমাত্র সিএসএস-এর উত্তরগুলি এই প্রশ্নের সঠিক উত্তর নয়, তবে যদি জেএস সমাধানগুলি আপনার কাছে গ্রহণযোগ্য হয়, তবে আপনার এখানে জেএস বা jQuery উত্তরগুলি বেছে নেওয়া উচিত। তবে, যেমন আমি উপরে বলেছি, সত্য, সঠিক উত্তরটি হ'ল আপনি সিএসএসে নির্ভরযোগ্যভাবে এটি করতে পারবেন না যদি না আপনি :notঅপারেটরটিকে [style*=display:none]এবং অন্যান্য অবহেলিত নির্বাচকদের সাথে গ্রহণ করতে রাজি হন না , যা কেবল ইনলাইন শৈলীতে কাজ করে এবং সামগ্রিকভাবে দরিদ্র না হয় সমাধান।

Comments

প্রথমত, আমি আপনার সাথে একমত কিন্তু আমার মনে হয় যে :notআপনি যেমনটি বলেছিলেন ঠিক তে অপারেটর ব্যবহার করা কিছু পরিস্থিতিতে কাজ করতে পারে। উদাহরণস্বরূপ, এটি আমার পরিস্থিতির জন্য পুরোপুরি কাজ করে যেখানে আমার কাছে জেএস শর্তসাপেক্ষে উপাদানগুলি গোপন করে যা এরপরে ইনলাইন শৈলী যুক্ত করে এবং তাই আপনার সমাধানটি আসলে পুরোপুরি কার্যকর হয় :)

— ছোঁজ

ঠিক আছে, তবে আমি অনুমান করি যা কাজ করে :) :) আমি কেবলমাত্র একজন আদর্শবাদী এবং আমি চাপ দিতে পছন্দ করি যেখানে জিনিসগুলি সবচেয়ে ভাল নয়, 'হ্যাকি' কী এবং এটি কী নয় তা পার্থক্য করতে সক্ষম হওয়া জরুরী এটি আমাদের আরও ভাল প্রোগ্রামার করে তোলে।

— দুদেওয়াদ

হ্যাঁ আমি শুনি, আমি একমত যে এই সমাধানটি কেবল ওপি ক্যোয়ারির সিএসএস সমাধান হিসাবে ব্যবহার করা উচিত নয়, আমি মনে করি যে জেএসের সাথে মিল রেখে যখন এটি ব্যবহার করা হয়েছে তখন এটি খুব ভাল কাজ করে।

— ডায়েজ 87

আপনি উপাদানগুলি (কোনও ইনলাইন শৈলীর পরিবর্তে) আড়াল করতে একটি সিএসএস বর্গ ব্যবহার করতে পারেন। যদি এটি হয় তবে আপনি সেই লুকানো শ্রেণীর জন্য নির্বাচককে ঠিক ততটাই উপেক্ষা করতে পারেন। এটি সর্বদা লুকানো কী একই জিনিস নির্বাচন করে কারণ উভয়ই একই সিএসএস বর্গ দ্বারা সেট করা হয়। সুতরাং আপনার উত্তর সঠিক দিকে যায় তবে যথেষ্ট নয়। :-)

— ygoe

Answer 3

আপনি যদি ইনলাইন শৈলীগুলি ব্যবহার করতে পারেন, তবে আপনি এটি সিএসএসের সাথে খাঁটিভাবে করতে পারেন।

পূর্ববর্তীটি দৃশ্যমান হলে আমি পরবর্তী উপাদানটিতে সিএসএস করার জন্য এটি ব্যবহার করছি:

বিভাগ [শৈলী = 'প্রদর্শন: ব্লক;'] + টেবিল {
  ফিল্টার: ঝাপসা (3px);
}

Comments

আমি এটিতে পরিবর্তন করব [style*='display: block']যেহেতু এটি হতে পারে display: block !important;বা কেবল <div style="display: block">:-)

— ওজজিআই

এটি আমার মতো সিএসএস ফাইলে কাজ করে .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

স্নিপেটের জন্য ধন্যবাদ, একমাত্র নন-জিক্যুয়ারি জবাব! যাইহোক, একাধিক অভিভাবক উপাদান প্রয়োগ করার সময় এটি কার্যকর হয় না: jsfiddle.net/uEeaA/100 - আপনি যে অন্যদের জন্য কাজ করে তাদের জন্য একটি সমাধান তৈরি করতে আমাকে সহায়তা করতে পারেন? আমার এটি দরকার, অন্যের এটির প্রয়োজন, তাই দয়া করে সহায়তা করুন :)

— mnsth

আমি বুঝতে পেরেছি এটি একটি পুরানো থ্রেড, তবে ভবিষ্যতের যে কোনও দর্শনার্থীর জন্য আপনি jsfiddle.net/uEeaA/103

— xec

আমি এই মাত্র খ / সি ভোট দিতে চেয়েছি আপনি jQuery বাদ দিয়েছেন - আপনার জন্য ভাল। আমার একমাত্র অভিযোগ হ'ল একটি ডিআইভি কেবল স্টাইলের প্যারামিটারের উপর ভিত্তি করেই বিভিন্ন দিক থেকে লুকানো যায়। বাস্তব তাত্ক্ষণিক: [1] প্রস্থ এবং উচ্চতা 0 এ সেট করা যেতে পারে, [2] রূপান্তর স্কেল 0, [3] হতে পারে এবং আমরা এটিকে দৃশ্যমান ক্ষেত্রের বাইরে রাখতে পারি।

— মার্কাস

Answer 6

চেষ্টা

বিভাগ: নয় ([শৈলী * = "প্রদর্শন: কিছুই নয়"])

Answer 7

অন্য উপায়ে, আপনি এটি জাভাস্ক্রিপ্ট দিয়ে করতে পারেন, জ্যাকুরিতে আপনি এর মতো কিছু ব্যবহার করতে পারেন:

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

* reedited

Answer 8

সিএসএস দিয়ে এটি সম্ভব নয়, তবে আপনি jQuery দিয়ে এটি করতে পারতেন।

জেএসফিডল ডেমো

JQuery:

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

এইচটিএমএল:

<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

আপনার যদি আর লুকানো উপাদানগুলির প্রয়োজন না হয় তবে কেবল element.remove()পরিবর্তে ব্যবহার করুন element.style.display = 'none';।

Answer 10

এটি আমার পক্ষে কাজ করেছে।

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

Comments

আপনি প্রশ্নের উত্তর দিচ্ছেন না

— সার্জিনহো