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

トリッキーなCSSセレクターの質問です。それが可能かどうかはわかりません。

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

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

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

これをJavaScriptまたはjQueryで選択してスタイルを設定することもできますが、CSSだけではこれを行うことはできません。

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

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

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

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

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

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

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

div [style = 'display：block;'] + table {
  フィルター：blur（3px）;
}

CSS値（表示）では選択できないと思います

編集：

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

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

純粋な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/

試す

div：not（[style * = "display：none"]）

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

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

*再編集

CSSでは不可能ですが、jQueryでこれを行うことができます。

JSFIDDLEデモ

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

});

非表示の要素が不要になった場合は、のelement.remove()代わりに使用してくださいelement.style.display = 'none';。

これでうまくいきました。

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