Я ищу решение применить стиль CSS к div2, только когда отображается div1. Как я могу это сделать?Стиль родительского div, основанный на другом div
<div class="div1"></div>
<div class="div2"></div>
<style>
/* when div1 is NOT present */
.div2 {
margin: 100px auto 100px auto;
}
/* when div1 IS present */
.div2 {
margin: 0 auto 100px auto;
}
</style>
Нет Javascript; Вы можете использовать селектор в CSS «Sibling» для достижения этой цели:
.div2 {
margin: 100px auto 100px auto;
}
.div1 + .div2 {
margin: 0 auto 100px auto;
}
Конечно, это относится только тогда, когда .div1 элемент не присутствует в DOM (в соответствии с комментарием в вашем примере кода). Если вы хотите сделать это, когда div1 присутствует, но скрыт, вам нужно будет использовать JS.
Немного JQuery всегда помогает, используйте: видимый селектор JQuery требуемого
if($('.div1').is(':visible'))
{
$('.div2').css('margin','0 auto 100px auto');
}
else
{
$('.div2').css('margin','100px auto 100px auto');
}
Почему downvote, позаботиться объяснить? – Varun
Правильный способ сделать этот вид поведения устанавливает базовый класс на их верхнем уровне материнского (может быть даже <body>, а оттуда вы можете установить любое поведение, которое вы хотите, чисто CSS.
.menu_open .div1 {
display: block;
}
.menu_open .div2 {
display: none;
}
.div1 {
display: none;
}
.div2 {
display: block;
}<body class="menu_open">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</body>Теперь вы можете переключаться между состояниями <body> классов с помощью JS, и вы можете установить сложные модели поведения для любых других элементов, независимых других братьев и сестер.
Без проблем, рад помочь. –
Какой позор мы не можем использовать минус, чтобы найти братьев и сестер раньше, а не только после! –
@ Le-roy Это звучит неплохо, но это не имеет большого смысла. Если вы обнаружите, что вам нужно знать, каково состояние предыдущих элементов, вы приближаетесь к проблеме от неверного ангела. Посмотрите на мой ответ здесь. – Narxx