사용 ':: 후'즉시 형제와 선택 '+'선택

Question

나는이 기본 HTML 구조가 있습니다

<div class="cotnainer"> 
    <div class="left"> 1 </div> 
    <div class="right"> 2 </div> 
    <div class="right"> 3 </div> 
    <div class="left"> 4 </div> 
    <div class="right"> 5 </div> 
    <!-- continuing on in a variable order --> 
</div> 

내가 클래스가 측면을 변경하기 전에 각 유형의 마지막 요소에 ::after 스타일을 적용 할 필요를 . 나는 위의 예에서 1, 3, 4에 스타일을 적용 할 필요가 즉

이러한 요소는 동적으로 생성됩니다

내가 좋아하는 CSS 선택기를 시도 :

.right + .right::after, .left + .left::after { ... } 
//this misses the individual elements 

.right::after, .left::after { ...apply style... } 
.right::after + .right, .left::after + .left { ...remove ::after style from preceeding elements... } 
//this was an attempt to remove the generally applied style from preceeding elements 

모든 도움, 아이디어 또는 제안에 감사드립니다.

편집 :이 질문은 나에게 문제가 남아있다으로 내가 더 원하는 결과를 달성하기 위해 솔루션과 아이디어를 요청하기 위해 현상금을 시작했다.

Answer 1

CS S는 이것을 할 수 없습니다. 적절한 해결책은 행을 그룹화하는 것입니다. 가능한 경우 상식 의미 론적 HTML을 사용하십시오.

ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 
.left { 
 
    background: #6AF; 
 
} 
 
.right { 
 
    background: #6CF; 
 
} 
 
.left > li:last-child::after { 
 
    content: " (last child of .left)"; 
 
} 
 
.right > li:last-child::after { 
 
    content: " (last child of .right)"; 
 
}

<div class="cotnainer"> 
 
    <ul class="left"> 
 
    <li>1</li> 
 
    </ul> 
 
    <ul class="right"> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    </ul> 
 
    <ul class="left"> 
 
    <li>4</li> 
 
    </ul> 
 
    <ul class="right"> 
 
    <li>5</li> 
 
    </ul> 
 
</div>

제가

상기 예에서 UL/리튬을 사용했지만 의미와 일치하는 요소가 더 있는지.

Answer 2

불행히도 CSS는 "마지막 클래스"를 선택하는 방법을 제공하지 않습니다. :: after를 사용하여 대상에 특정 클래스를 적용하거나 일부 JavaScript를 사용하여 선택을 수행 할 수 있습니다.

Answer 3

내가 아는 한, 나는 당신이 CSS만으로 이것을 할 수 있다고 생각지 않는다. 보리스처럼 보입니다.

.left + .right, 
.right + .left { 
    color:red; 
} 

아마도 그렇게 할 수 있습니다. 매일 새로운 것을 배웁니다!

---

당신은 같은 것을 함께하지만, jQuery를 함께 할 수있다 :

JQuery와 여기

var lastElemHasClassLeft = false; 
    $('.cotnainer > div').each(function(key, val) { 
    if (lastElemHasClassLeft != $(this).hasClass('left')) { 
     $(this).addClass('change'); 
    } 
    lastElemHasClassLeft = $(this).hasClass('left'); 
}); 

CSS

.change::after { 
    content: 'hello'; 
} 

바이올린 : http://jsfiddle.net/2hxxhumq/