css 가장 가까운 항목 찾기

Question

동일한 요소가 포함 된 중첩 구조가 있습니다. 이 셀렉터가 더 많은 요소가 실제 생활에서

.set1 > .content > .trigger { 
    background: red; 
} 

:은 현재 세트 내의 요소를 대상으로이 같은 일을한다. 작동하는 동안 요소 중 하나에서 이름이나 깊이를 변경하면 더 이상 작동하지 않습니다.

현재 세트의 .trigger (이 경우)을 찾는 방법이 있습니까?

Answer 1

현재 세트 내의 모든 트리거에 스타일을 적용한 다음 첫 번째 트리거 이후에 ​​오는 다른 트리거의 스타일을 제거 할 수 있습니다.

div { 
 
    padding: 5px; 
 
    border: 1px solid; 
 
} 
 

 
.set1 .trigger { 
 
    background: red; 
 
} 
 

 
.set1 .trigger ~ .set .trigger { 
 
    background: none; 
 
}

<div class="set set1"> 
 
    <div class="content"> 
 
    <div class="trigger"></div> 
 
    <div class="set set2"> 
 
     <div class="content"> 
 
     <div class="trigger"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>