Выберите все элементы между двумя известными элементами селектором CSS

у меня есть два элемента с определенными идентификаторами, имеющими какой-либо HTML между ними, например:Выберите все элементы между двумя известными элементами селектором CSS

<div id='d1'>Hello</div> 

<!-- Here come any html code --> 
<div>Example</div><hr/><a href="">Example</a> 

<div id='d2'>World</div>

Есть ли селектор CSS, который выбирает все элементы между # d1 и # d2?

источник

2015-08-16 rlib

насколько я знаю ... нет –

Ответ: Нет

Но у вас всегда есть возможность JQuery:

$('#id').nextUntil('#id2')

Имейте в виду, метод .nextUntil выбирает все элементы между ними, эксклюзив. Чтобы выбрать элементы, в том числе двух элементов, используйте:

$('#id').nextUntil('#id2').andSelf().add('#id2')

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
.siblings * { 
 
    display: block; 
 
    border: 2px solid lightgrey; 
 
    color: lightgrey; 
 
    padding: 5px; 
 
    margin: 15px; 
 
} 
 
</style> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $("li.start").nextUntil("li.stop").css({"color": "red", "border": "2px solid red"}); 
 
    
 
    $("li.start1").nextUntil("li.stop1").andSelf().add("li.stop1").css({"color": "red", "border": "2px solid red"}); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 

 
    <p>Just selecting all elements in between, exclusive.</p> 
 
    
 
<div style="width:500px;" class="siblings"> 
 
    <ul>ul (parent) 
 
    <li>li (sibling)</li> 
 
    <li>li (sibling)</li> 
 
    <li class="start">li (sibling with class name "start")</li> 
 
    <li>li (the next sibling of li with class name "start")</li> 
 
    <li>li (the next sibling of li with class name "start")</li> 
 
    <li>li (the next sibling of li with class name "start")</li> 
 
    <li class="stop">li (sibling with class name "stop")</li> 
 
    </ul> 
 
</div> 
 
    
 
    <p>Just selecting all elements in between, inclusive.</p> 
 
    
 
<div style="width:500px;" class="siblings"> 
 
    <ul>ul (parent) 
 
    <li>li (sibling)</li> 
 
    <li>li (sibling)</li> 
 
    <li class="start1">li (sibling with class name "start")</li> 
 
    <li>li (the next sibling of li with class name "start")</li> 
 
    <li>li (the next sibling of li with class name "start")</li> 
 
    <li>li (the next sibling of li with class name "start")</li> 
 
    <li class="stop2">li (sibling with class name "stop")</li> 
 
    </ul> 
 
</div> 
 

 
</body> 
 
</html>

На мой взгляд, это самый простой вариант.

источник

2015-08-16 13:16:45

Выберите все элементы между двумя известными элементами селектором CSS

ответ

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