CSS доступность относительно контента

229

05 сентября 2017, 08:38

На css хочу сделать:

При такой структуре

<div class="admin-include">
    <div class="bx-context-toolbar-empty-area">
        text
    </div>
</div>

admin-include доступный, кликабельний, видимый

При такой:

<div class="admin-include">
    text
</div>

admin-include недоступный, некликабельний, невидимый, никак не повлиял на DOM

Answer 1

.admin-include { 
  overflow: hidden; 
  white-space: nowrap; 
} 
 
.admin-include:before { 
  content: ""; 
  display: block; 
  margin-bottom: -10em; 
} 
 
.bx-context-toolbar-empty-area { 
  margin-top: 10em; 
  white-space: normal; 
}

AAAAAAAA 
 
<div class="admin-include"> 
    <div class="bx-context-toolbar-empty-area"> 
        text 
    </div> 
</div> 
 
BBBBBBBB 
 
<div class="admin-include"> 
    text 
</div> 
 
CCCCCCCC

Answer 2

По большему счету никак, разве что так, но очень специфично:

.admin-include { font-size: 0; } 
 
.admin-include:nth-child(1) { background-color: green; } 
.admin-include:nth-child(2) { background-color: red; } 
 
.bx-context-toolbar-empty-area { font-size: 14px; }

<div class="admin-include"> 
    <div class="bx-context-toolbar-empty-area"> 
        text 
    </div> 
</div> 
<div class="admin-include"> 
    text 
</div>

Не display: none; конечно, но блока по сути не видно, большего css'ом не сделать