Скрыть остальную часть родительского div условно ниже дочернего

Question

Привет, есть ли способ скрыть остальную часть содержимого div под определенным c потомком этого div? Например, если бы у меня был следующий код:

<div class="parent>
    content content, some more content
    <div class="child">
         I am the child
    </div>
    I will not be displayed as I am below child div
</div>

Я нормально использую Javascript (или Typescript), а также CSS.

Чтобы быть более конкретным c о проблеме: у меня есть веб-элемент, которому необходимо скрыть содержимое под ним, пока не будет выполнено определенное c условие. Я подумал о том, чтобы включить содержимое, которое будет условно отображаться внутри дочернего div, и отобразить это условно, однако из-за формата данных все должно быть внутри parent

Answer 1

Прямо сейчас «Я не буду отображаться ...» - это текстовый узел, на который (в настоящее время) нельзя нацеливаться с помощью CSS. Если остальное содержимое заключено в какой-либо элемент, вы можете использовать селектор ~ sibling:

.child ~ * {
  display: none;
}

<div class="parent">
    content content, some more content
    <div class="child">
         I am the child
    </div>
    <div>
        I will not be displayed as I am below child div
    </div>
</div>