요소의 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 기능을 사용하여 이것이 가능한지 궁금합니다.

답변

$('div:has(div.a)').css('border', '1px solid red');

$('div:has(div.a)').addClass('redBorder');

.redBorder
{
    border: 1px solid red;
}

div.a < div { border: solid 3px red; }

<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>

<td class="dt-center">
    <input class="a" name="constCheck" type="checkbox" checked="">
</td>

 $('tbody td:has(input.a)').css('padding', '0px');

<td class=" dt-center" style="padding: 0px;">
    <input class="a" name="constCheck" type="checkbox" checked="">
</td>