마지막으로 보이는 div를 얻는 CSS 선택기

까다로운 CSS 선택기 질문입니다. 가능한지 모릅니다.

이것이 HTML 레이아웃이라고 가정 해 봅시다.

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

주어진 예제에서 세 번째 로 div표시되는 last를 선택하고 싶습니다 (예 : not display:none) div. 마음 당신은의 수를 div실제 페이지들 (심지어 다를 수 있습니다 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;'] + 테이블 {
  필터 : 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 * = "디스플레이 : 없음"])

다른 방법으로, 당신은 javascript로 그것을 할 수 있습니다, Jquery에서 당신은 다음과 같은 것을 사용할 수 있습니다 :

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

* 재 편집

CSS로는 불가능하지만 jQuery로도 가능합니다.

JS 피들 데모

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