자식 요소에 따라 요소에 CSS 스타일 적용

요소의 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; 아이가 아닌 부모에게 aand 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의 답변을 확장 한 것이지만이를 구현하는 공동 작업이 많을수록 좋습니다. 요약하면, 이것이 작동하기 때문에 다른 사람에게 도움이되기를 바랍니다. 마지막으로 올바른 방향으로 인도 해 주셔서 감사합니다.