Как основать CSS на параллельных элементах DOM?

Question

У меня есть процедурно сгенерированная визуализация, которая переключается между моей визуализацией и визуализацией моих друзей, удаляя их из DOM в процессе и повторно вводя при необходимости (это должно быть так).

В нижнем колонтитуле , есть фрагмент текста, который имеет отношение только к одному представлению.

<div class='container'>
    <div id='myvis'>The Vis</div>
</div>
<footer><p>Hi Mom</p></footer>

Но тогда #myvis будет удален из DOM и заменен следующим:

<div class='container'>
    <div id='myfriendsvis'>The Vis</div>
</div>
<footer><p>Hi Mom</p></footer>

Но я Очевидно, я не хочу здесь говорить Привет, мама, потому что почему моя мама смотрит на моих друзей vis?

Поскольку они параллельны, я не могу сказать

#myfriendsvis p {
display: none;
}

Я тоже попробовал

#myfriendsvis ~ p {
display: none;
}

Я также написал это:

    function myFunction(x) {
    if (slides) {
        HiMom.style.display = "none";
    } else {
        HiMom.style.display = "block";
    }
};

const slides = document.getElementById('myfriendsvis').style.width == 1024; // basically saying if this item exists in the dom, it'll exist with this style, so if its there do this
const HiMom = document.getElementsByClassName('footer p'); // IK its not a class but you get it
myFunction(slides) // Call listener function at run time
slides.addListener(myFunction) // Attach listener function on state changes

Но поскольку myfriendsvis идет вторым, его нет в DOM.

Есть ли способ css p на основе другого элемента выше, несмотря на то, что он вложен?

Принятие советов JS, CSS и HTML. Может быть сложно реализовать, но я решу это.

Answer 1

К сожалению, чистое решение css невозможно, потому что вам нужно получить родительский элемент #myfriendsvis, а это в настоящее время невозможно.

Чтобы заставить его работать, я обновил ваш Javascript:

    function myFunction(x) {

    if (slides) {
        HiMom.style.display = "none"
    } else {
        HiMom.style.display = "block";
    }
};

const slides = document.getElementById('myfriendsvis')
slides.style.width == 1024; // basically saying if this item exists in the dom, it'll exist with this style, so if its there do this
const HiMom = document.querySelector('footer p'); // IK its not a class but you get it

myFunction(slides) // Call listener function at run time
slides.addEventListener("onload",myFunction) // Attach listener function on state changes

Выполнение обновления стиля slides за один go привело к тому, что его значение стало false вместо узла. Так что я сделал это в два этапа. Я также использую querySelector, поскольку он возвращает только один узел вместо коллекции, и я использовал прослушиватель событий onload. В зависимости от вашего варианта использования вам может потребоваться обновить его с помощью прослушивателя событий обновления.

Вот codepen , с которым вы можете поиграть.