하위 요소에 따라 요소에 CSS 스타일 적용

하위 요소에 따라 요소에 CSS 스타일 적용

이 질문에는 이미 다음과 같은 답이 있습니다.

CSS 부모 선택기가 있습니까? (33개 답변)

마감됨2년 전에.

커뮤니티는 10개월 전에 이 질문을 다시 할지 여부를 검토한 후 이 질문을 닫았습니다.

원래 종료 이유가 해결되지 않았습니다.

일치하는 요소가 특정 요소(직접 하위 항목)를 포함하는 경우에만 적용되는 요소에 대한 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) { border: solid 3px red; }
div:has(div.b) { border: solid 3px blue; }

---

제가 알기로는 자녀 요소를 기반으로 부모 요소를 스타일링하는 것은 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" 선택기입니다.

기본적으로, 아닙니다.다음은 당신이 이론적으로 추구했던 것일 것입니다.

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

불행히도 그것은 존재하지 않습니다.

"도대체 왜 안 되는 거야"라는 문구를 따라 적은 글이 몇 개 있습니다.Shaun Inman에 의해 살이 잘 찐 것은 꽤 좋습니다.

http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors

업데이트. 수년이 지난 지금, :가 도래하여 브라우저 지원이 증가하고 있습니다.

https://developer.mozilla.org/en-US/docs/Web/CSS/ : has

12년은 긴 시간입니다.

@kp의 답변 위에:

저는 이 문제를 해결하고 있는데, 저의 경우에는 자식 요소를 보여주고 그에 따라 부모 개체의 높이를 수정해야 합니다(어떤 이유로 부트스트랩 헤더에서 자동 크기 조정이 작동하지 않습니다).

하지만 자바스크립트를 사용하여 부모를 수정하는 대신 동적으로 CSS 클래스를 부모에게 추가하고 그에 따라 CSS 선택적으로 아이들을 보여줄 것이라고 생각합니다.이것은 CSS 상태를 기반으로 하지 않고 논리에서 결정을 유지합니다.

tl;dr; 적용하기a그리고.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의 답변의 확장이지만, 이를 구현하는 협업이 많을수록 좋습니다.요약하자면, 저는 이것이 효과가 있기 때문에 다른 사람에게 도움이 되기를 바랍니다!마지막으로 올바른 방향으로 이끌어주신 @KP님께 진심으로 감사드립니다!

언급URL : https://stackoverflow.com/questions/2326499/apply-css-styles-to-an-element-depending-on-its-child-elements