요소의 CSS 스타일을 정의 할 수 있습니까? 일치하는 요소에 특정 요소 (직접 하위 항목)가 포함 된 경우에만 적용됩니까?
나는 이것이 예제를 사용하여 가장 잘 설명된다고 생각합니다.
참고 : 포함 된 자식 요소에 따라 부모 요소의 스타일을 지정 하려고합니다 .
<style>
/* note this is invalid syntax. I'm using the non-existing
":containing" pseudo-class to show what I want to achieve. */
div:containing div.a { border: solid 3px red; }
div:containing div.b { border: solid 3px blue; }
</style>
<!-- the following div should have a red border because
if contains a div with class="a" -->
<div>
<div class="a"></div>
</div>
<!-- the following div should have a blue border -->
<div>
<div class="b"></div>
</div>
참고 2 : 자바 스크립트를 사용 하여이 작업을 수행 할 수 있다는 것을 알고 있지만 알 수없는 CSS 기능을 사용하여 이것이 가능한지 궁금합니다.
답변
내가 아는 한 자식 요소를 기반으로 부모 요소의 스타일을 지정하는 것은 CSS의 사용 가능한 기능이 아닙니다. 이를 위해 스크립팅이 필요할 것입니다.
당신이 뭔가 할 수 있다면 그것은 좋은 것 div[div.a]
또는 div:containing[div.a]
당신이 말한 같은,하지만이 할 수 없습니다.
jQuery 를 살펴볼 수도 있습니다. 선택기는 ‘포함’유형과 매우 잘 작동합니다. 하위 내용을 기반으로 div를 선택한 다음 CSS 클래스를 모두 한 줄에 부모에 적용 할 수 있습니다.
jQuery를 사용하면이 줄을 따라 무언가가 작동 할 수 있습니다 (그러나 이론은 없습니다).
$('div:has(div.a)').css('border', '1px solid red');
또는
$('div:has(div.a)').addClass('redBorder');
CSS 클래스와 결합 :
.redBorder
{
border: 1px solid red;
}
다음은 jQuery “has”selector에 대한 설명서입니다 .
답변
기본적으로 이론적으로 다음 은 다음과 같습니다 .
div.a < div { border: solid 3px red; }
불행히도 존재하지 않습니다.
“도대체 왜 그렇지 않은가?”란에 몇 가지 글이 있습니다. Shaun Inman의 잘 다듬어 진 것은 꽤 좋습니다.
http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors
답변
@kp의 답변 위에 :
나는 이것을 다루고 있으며 내 경우에는 자식 요소를 표시하고 부모 객체의 높이를 적절하게 수정해야합니다 (어떤 이유로 디버깅 할 시간이없는 이유로 자동 크기 조정이 부트 스트랩 헤더에서 작동하지 않습니다) .
그러나 자바 스크립트를 사용하여 부모를 수정하는 대신 CSS 클래스를 동적으로 부모에 추가하고 그에 따라 CSS를 선택적으로 표시합니다. CSS 상태를 기반으로하지 않고 로직 에서 결정 을 유지합니다 .
tl; dr; 아이가 아닌 부모에게 a
and b
스타일을 적용하십시오 <div>
(물론, 모든 사람이 이것을 할 수있는 것은 아닙니다.
<style>
.parent { height: 50px; }
.parent div { display: none; }
.with-children { height: 100px; }
.with-children div { display: block; }
</style>
<div class="parent">
<div>child</div>
</div>
<script>
// to show the children
$('.parent').addClass('with-children');
</script>
답변
필자의 경우 DataTables로 동적으로 렌더링되는 테이블의 입력 확인란이 포함 된 요소의 셀 패딩을 변경해야했습니다.
<td class="dt-center">
<input class="a" name="constCheck" type="checkbox" checked="">
</td>
initComplete 함수 내에서 다음 라인 코드를 구현 한 후 올바른 패딩을 생성하여 행이 비정상적으로 큰 높이로 표시되지 않도록 수정했습니다.
$('tbody td:has(input.a)').css('padding', '0px');
이제 부모 요소에 올바른 스타일이 적용되고 있음을 알 수 있습니다.
<td class=" dt-center" style="padding: 0px;">
<input class="a" name="constCheck" type="checkbox" checked="">
</td>
기본적으로이 답변은 @KP의 답변을 확장 한 것이지만이를 구현하는 공동 작업이 많을수록 좋습니다. 요약하면, 이것이 작동하기 때문에 다른 사람에게 도움이되기를 바랍니다. 마지막으로 올바른 방향으로 인도 해 주셔서 감사합니다.