1

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

2
  • В чем суть вопроса ?
    – ImZ
    2 сен 2017 в 13:34
  • Свойства родителя не могут зависеть от потомков. Нерешаемо на css. 2 сен 2017 в 13:35

2 ответа 2

2

.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

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'ом не сделать

7
  • Я тоже нашаманил)))
    – Qwertiy
    2 сен 2017 в 13:49
  • @Qwertiy, ох и любишь же ты какие-то нестандартные решения xDDD 2 сен 2017 в 13:52
  • Ага))) Кстати, я его уже подправил, чтобы оно от line-height не зависело.
    – Qwertiy
    2 сен 2017 в 13:53
  • Сначала думал, что можно будет использовать для резиновых блоков с "расхлопыванием", но нет, а жаль =/ Все равно зависит, только теперь от margin ... 2 сен 2017 в 13:55
  • Так вроде ж можно? white-space: nowrap; гарантирует, что будет ровно одна строка. 10em заведомо больше высоты этой строки. Если туда пихать элементы, можно добавить .admin-include > * { display: none; }.
    – Qwertiy
    2 сен 2017 в 13:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.