Выбор братьев и сестер из родительского селектора

Я пытаюсь сделать что-то чисто в CSS.Выбор братьев и сестер из родительского селектора

<body> 
    <div class="box"> 
     <div>Text</div> 
     <div>Text</div> 
     <div>Text</div> 
    </div> 
    <div class="box"> 
     <div>Text</div> 
     <div class="selected">Text</div> 
     <div>Text</div> 
    </div> 
    <div class="box"> 
     <div>Text</div> 
     <div>Text</div> 
     <div>Text</div> 
    </div> 
</body>

Fiddle: http://jsfiddle.net/c4bmuxze/4/

Я хочу, чтобы все DIVs следующие "выбран" один зеленый. Как вы это делаете? Как вы можете вернуться к родительскому селектору (например, «.box»), выбрать всех следующих братьев и сестер (через «~»), а затем спуститься, чтобы выбрать из них DIV?

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

Я надеюсь на какого-то гуру CSS или кого-то, указывающего на очевидное для меня.

источник

2015-10-06 LilaQ

Это может быть достигнуто только в JavaScript. Вы не можете выбрать родителей в CSS. – Alejalapeno

Зачем вам нужно вернуться к родительскому объекту и выбрать его? '.box .selected + div' Вы ищете это? –

http://stackoverflow.com/a/1014958/2686143 – guvenckardas

Невозможно с CSS, но вы можете воспользоваться помощью jQuery, чтобы выбрать родителя.

$('.selected').parent().addClass('contains-selected');

.selected { 
 
    color: red; 
 
} 
 
.limegreen { 
 
    color: limegreen; 
 
} 
 
.selected ~ div { 
 
    color: limegreen; 
 
} 
 
.contains-selected.box ~ div { 
 
    color: limegreen; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div class="box"> 
 
    <div>Text</div> 
 
    <div>Text</div> 
 
    <div>Text</div> 
 
    </div> 
 
    <div class="box"> 
 
    <div>Text</div> 
 
    <div class="selected">Text</div> 
 
    <div>Text</div> 
 
    </div> 
 
    <div class="box"> 
 
    <div>Text</div> 
 
    <div>Text</div> 
 
    <div>Text</div> 
 
    </div> 
 
    <div class="box"> 
 
    <div>Added Text</div> 
 
    <div>Added Text</div> 
 
    <div>Added Text</div> 
 
    </div> 
 
</body>

источник

2015-10-06 10:09:11

У меня уже есть что-то подобное , мой подход, основанный только на CSS, заключался в том, чтобы избежать этого, так как это действительно багги-решение в моем случае. – LilaQ

Это действительно неэффективно. Просто добавьте класс к родительскому элементу, например '.contains-selected', и используйте селекторные слова для CSS для остальных. – Alejalapeno

@Alejalapeno Вам нужно будет добавить/удалить его вручную. Это будет автоматически неэффективно, если «выбран» будет удален из дочернего элемента. Например, пример использования выбранного динамического кода, а не статический код. –

Выбор братьев и сестер из родительского селектора

ответ

Смежные вопросы