아니요. CSS를 통해서는 불가능합니다. "캐스케이드"를 생각 나게한다 ;-).
그러나 페이지 에 JavaScript 를 추가 할 수 있으면 약간의 jQuery 가 최종 목표를 달성 할 수 있습니다.
jQuery를 사용 find하여 대상 요소 / 클래스 / ID에서 "look-ahead"를 수행 한 다음 역 추적하여 대상을 선택할 수 있습니다.
그런 다음 jQuery를 사용하여 요소의 DOM (CSS)을 다시 작성하십시오.
를 기반으로 마이크 브랜트하여이 대답 , 다음과 같은 jQuery를 조각은 도움이 될 수.
$('p + ul').prev('p')
먼저 <ul>a 바로 뒤에 오는 모든을 선택합니다 <p>.
그런 다음 "역 추적"하여 <p>해당 세트에서 이전 의 모든 것을 선택합니다 <ul>.
효과적으로, "이전 형제"는 jQuery를 통해 선택되었습니다.
이제 .css함수를 사용하여 해당 요소의 CSS 새 값을 전달하십시오.
내 경우에는 id가있는 DIV를 선택하는 방법을 찾고 #full-width있었지만 클래스가 (간접) 자손 DIV 인 경우에만 .companies.
에서 모든 HTML을 제어 .companies할 수 있었지만 그 위에있는 HTML을 변경할 수 없었습니다.
그리고 계단식은 한 방향으로 만 진행됩니다.
따라서 ALL을 선택할 수 #full-width있습니다.
또는 .companies그 뒤에 만 선택할 수 #full-width있습니다.
그러나 나는 할 수 없습니다 만 선택 #full-width그 s의 진행 .companies .
그리고 다시, 나는 .companiesHTML에서 더 높은 것을 추가 할 수 없었 습니다. HTML의 해당 부분은 외부에서 작성되었으며 코드를 감쌌습니다.
그러나 jQuery를 함께, 내가 할 수 필수 선택 #full-width들, 그 다음 적절한 스타일을 지정합니다 :
$("#full-width").find(".companies").parents("#full-width").css( "width", "300px" );
이것은 CSS에서 표준으로 특정 요소를 대상으로하는 데 셀렉터가 사용되는 방식과 유사하게 모든 항목을 찾아서 #full-width .companies선택합니다 .companies.
그런 다음 사용 .parents"철수"과의 모든 부모를 선택 .companies,
하지만 유지하기 위해 그 결과를 필터링 #fill-width그래서 결국 것을, 요소
그것은 단지 선택 #full-width그것은이있는 경우 요소 .companies클래스의 자손입니다.
마지막으로 width결과 요소에 새로운 CSS ( ) 값을 할당합니다 .
$(".parent").find(".change-parent").parents(".parent").css( "background-color", "darkred");
div {
background-color: lightblue;
width: 120px;
height: 40px;
border: 1px solid gray;
padding: 5px;
}
.wrapper {
background-color: blue;
width: 250px;
height: 165px;
}
.parent {
background-color: green;
width: 200px;
height: 70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="wrapper">
<div class="parent">
"parent" turns red
<div class="change-parent">
descendant: "change-parent"
</div>
</div>
<div class="parent">
"parent" stays green
<div class="nope">
descendant: "nope"
</div>
</div>
</div>
Target <b>"<span style="color:darkgreen">parent</span>"</b> to turn <span style="color:red">red</span>.<br>
<b>Only</b> if it <b>has</b> a descendant of "change-parent".<br>
<br>
(reverse cascade, look ahead, parent un-descendant)
</html>
jQuery Reference Docs :
$ () 또는 jQuery () : DOM 요소.
. find : 현재 일치하는 요소 집합에서 각 요소의 자손을 가져와 선택기, jQuery 객체 또는 요소로 필터링합니다.
. 부모 : 일치하는 요소 집합에서 각 요소의 바로 이전 형제를 가져옵니다. 선택기가 제공되면 해당 선택자와 일치하는 경우에만 이전 형제를 검색합니다 (목록에있는 요소 / 선택기 만 포함하도록 결과를 필터링 함).
. css : 일치하는 요소 집합에 대해 하나 이상의 CSS 속성을 설정합니다.