javascript - 要素の後に表示されるすべての要素のセレクター

Question

隣接する要素を操作できるセレクターは知って+いますが、1 つだけでなくすべての要素を操作したいと考えています。

<article class="non-selected"></article>
<nav id="nav-below"></nav>
<article class="select-me"></article>
<article class="select-me"></article>
<article class="select-me"></article>
<footer class="dont-select-me"></footer>

article上記の例では、各をselect-meクラスで選択しようとしています。(通常のクラス セレクターは使用できません)。

これはjQueryで可能ですか?

Answer 1

一般的な兄弟コンビネータを使用します:

.non-selected ~ .select-me {
    color: red;
}

例: http://jsfiddle.net/XFGfd/5/

Answer 2

jQuery: ライブデモ

$('#nav-below').nextUntil('.dont-select-me')  // do something

_{http://api.jquery.com/nextUntil/}

または、CSS General sibling Combinator (~) を使用: LIVE DEMO

#nav-below ~ article{ 
  background:red; 
}