web-dev-qa-db-ja.com

最後に表示されるdivを取得するCSSセレクター

難しいCSSセレクターの質問、それが可能かどうかわからない。

これがHTMLレイアウトであるとしましょう：

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

表示されている最後のdivを選択します（つまり、display:noneではなく）。これは、与えられた例の3番目のdivになります。実際のページ上のdivsの数は異なる可能性があります（display:noneであっても）。

htmlcsscss-selectors
150
Vishal Shah

JavaScriptまたはjQueryを使用してこれを選択およびスタイル設定できますが、CSSだけではこれを実行できません。

たとえば、サイトに jQuery が実装されている場合は、次のようにします。

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

できれば、選択しているdivの周りにクラス/ IDがラップされていることが望ましいですが、その場合、コードは次のようになります。

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

この質問に対する本当の答えは、あなたにはできないということです。 CSSのみの回答の代替はこの質問に対する正しい回答ではありませんが、JSソリューションが受け入れられる場合は、ここでJSまたはjQueryの回答のいずれかを選択する必要があります。ただし、上で言ったように、本当の正しい答えは、:notで[style*=display:none]演算子を受け入れない限り、CSSでこれを確実に行うことはできませんです。他のそのような否定セレクタは、インラインスタイルでのみ機能し、全体的に貧弱なソリューションです。

13
dudewad

Css値で選択することは不可能だと思います（表示）

編集：

私の意見では、ここでjqueryを少し使用するのが理にかなっています。

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

純粋なJSソリューション（たとえば、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/

6
panther

インラインスタイルを使用できる場合は、CSSを使用して純粋に行うことができます。

前の要素が表示されているときに、次の要素でCSSを実行するためにこれを使用しています。

 div [style = 'display：block;'] + table {
 filter：blur（3px）; 
}
6
Alex Grande

別の方法で、javascriptを使用してそれを行うことができます。Jqueryでは、次のようなものを使用できます。

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

*再編集

2
eveevans

CSSでは不可能ですが、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>

CSS：

.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;
    }

});
2
martynas