부모 클래스를 기반으로 자식 요소를 선택적으로 숨기기

Question

table에 각각 tr이 많은 요소가 있습니다. 행을 최소화 할 수 있도록 '붕괴'기능을 구현하여 몇 가지 필수 요소 만 보여줍니다. 나는 이것을 보여주고 자하는 요소에 show-on-collapse 클래스를 추가하고 나서, 내 스타일 시트를 통해 다른 모든 것을 숨기고 싶습니다.

I가 발생하고있어 문제는 주어진 요소가 명시 적으로 display: block; 선언 된 경우에도 부모의 어떤이 display: none;을 경우, 그것은 표시되지 것입니다.

show-on-collapse을 추가하여이 문제를 해결할 수는 있지만 실제로 구현할 수는 없으며 내 마크 업에 많은 것을 추가합니다. http://jsfiddle.net/89XfC/이

코드의 가장 관련성이 비트가 여기에 not 선택입니다 : 여기

는 JSFiddle 내가 달성하기 위해 노력하고있어 및 불만족 해결 방법은 내가 지금 무엇을 보여주는거야 내가 '무엇

table { 
    width: 100%; 

    &.collapsed { 
    td { 
     &:not(.show-on-collapse) { display: none; } 
      *.hide-on-collapse { display: none; } 
    } 
    } 
} 

찾고있는 것은 &.collapsed 아래에있는 것이므로, 부모 요소가 collapsed 클래스가되면 요소가 show-on-collapse 인 요소 만 볼 수 있습니다. 어떻게해야합니까?

Answer 1

이러한 필수 요소가 셀의 어떤 깊이에있을 수있는 경우 간단한 CSS 솔루션이 없습니다.
행이 무너 졌을 때나 아이들이나 손자들이 보여 주어야 할 셀이 필수 블록이라면 간단 할 것입니다. 그러나이 모든 것이 혼합 된 것은 아닙니다.

따라서 필수 블록의 모든 조상에 클래스가 필요합니다. 그렇지 않으면 더 이상 표시되지 않습니다. 여기에 바이올린이 있습니다 : http://jsfiddle.net/89XfC/2/
요소는 block이 아닌 table-cell으로 표시됩니다. 두 클래스를 모두 사용할 필요가 없다면 두 클래스를 하나의 클래스로 최적화 할 수 있습니다.

HTML

<div class="container"> 
    <table class="table1"> 
     <tr> 
      <td class="has-essential"> 
       <span class='is-essential'>Show me!</span> 
      </td> 
      <td>Hide me!</td> 
      <td class='is-essential'>Show me too!</td> 
      <td class="has-essential"> 
       <ul class="has-essential"> 
        <li>One</li> 
        <li>Two</li> 
        <li class='is-essential'>Three</li> 
        <li>Four</li> 
       </ul> 
      </td> 
     </tr> 
    </table> 

    <a class="collapser1">Click me</a> 

</div> 

CSS (당신이 가장 가능성이 작업을 수행 할 수 있습니다 그의 대답은 좋은이기 때문에 당신이 동의해야하는) FelipeAls의 대답 오프

.collapsed td, 
.collapsed td * { 
    display: none; 
} 
.collapsed td.is-essential, 
.collapsed td.has-essential { 
    display: table-cell; 
} 
.collapsed .is-essential, 
.collapsed .has-essential { 
    display: block; 
} 

Answer 2

건물, 여기에 그것은 SCSS를 사용하는 것처럼 보일 것입니다.

table { 
    width: 100% 

    &.collapsed { 
     td { 
      display: none 

      & * { 
       display: none 
      } 

      &.is-essential, &.has-essential { 
       display: table-cell 
      } 
     } 

     .is-essential, .has-essential { 
      display: block 
     } 
    } 
}