jQueryでのnextAll()・prevAll()・nextUntil()のような処理をCSSのみで実現できないかと思い、考えてみました。
ADs
指定要素以降の兄弟要素を取得します。
たとえば以下のようなコードの場合、4と5のdivの文字が赤になります。
1 2 3 4 5 6 7 8 9 |
$(function(){ $('.next').nextAll().css('color','#f33'); }); <div>1</div> <div>2</div> <div class="next">3</div> <div>4</div> <div>5</div> |
指定要素以前の兄弟要素を取得します。
たとえば以下のようなコードの場合、1と2のdivの文字が赤になります。
1 2 3 4 5 6 7 8 9 |
$(function(){ $('.prev').prevAll().css('color','#f33'); }); <div>1</div> <div>2</div> <div class="prev">3</div> <div>4</div> <div>5</div> |
指定要素からnextUntilの引数で指定された要素までの兄弟要素を取得します。
たとえば以下のようなコードの場合、4,5,6の文字が赤になります。
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function(){ $('.from').nextUntil('.to').css('color','#f33'); }); <div>1</div> <div>2</div> <div class="from">3</div> <div>4</div> <div>5</div> <div>6</div> <div class="to">7</div> <div>8</div> |
古いIEを切れなかった時代はjQueryに頼りましたが、CSSの各種セレクタを使えばできるのではないかと思いやってみました。
たとえば以下のようなHTMLがあったとして、4~6だけ適用させたい場合の例です。
jQueryで言うところのnextAll()です
1 2 3 4 5 6 7 8 |
<div class="module_sample sample1"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> |
兄弟要素を取得する間接セレクタ(~)を使い、以下のようにします。
1 2 3 |
.sample1 div:nth-child(3) ~ div { background: #f33; } |
先程とは逆に指定要素以前に適用する例です。
jQueryで言うところのprevAll()です
以下のHTMLの場合で1,2,3にだけ適用します。
1 2 3 4 5 6 7 8 |
<div class="module_sample sample2"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> |
1 2 3 4 |
/* 4,5,6...番目の要素が:notで除外される */ .sample2 div:not(:nth-child(n + 4)) { background: #f33; } |
並列に並んだ要素の最後n個のみに適用する例です。
たとえば以下のHTMLで最後3個(6,7,8)にスタイルを適用させます。
横3個にブロックを並べたレイアウトで、最後の一行だけmargin-bottomを大きく取りたい、みたいなときに使えます。
1 2 3 4 5 6 7 8 9 10 |
<div class="module_sample sample3"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> </div> |
1 2 3 4 5 6 |
/* :nth-last-childは「最後からn番目」に適用されるセレクタです IE9以降で対応しています。 */ .sample3 div:nth-last-child(4) ~ div { background: #f33; } |
以下のような見出し(h3)と各種要素で構成されるHTMLで、見出し以外にスタイルを適用させたい場合の例です。
jQueryでいうと $(‘h3’).nextUntil(‘h3’); の処理です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="module_sample sample4"> <h3>見出し</h3> <div>1</div> <p>2</p> <h3>見出し</h3> <div>1</div> <ul><li>2</li></ul> <h3>見出し</h3> <dl> <dt>1</dt> <dd>2</dd> </dl> <h3>見出し</h3> <div>1</div> <div>2</div> </div> |
1 2 3 |
.sample4 h3 ~ *:not(h3) { background: #f33; } |
昔はIEのせいでjQuery頼りだった処理もずいぶん楽できるようになりました…。
Sassのmixinなどを使えばさらに便利に使えるかもしれませんね。
ADs
prevAll( )の欄もnextAll( )になっちゃってます。
すみません、間違ってました…。
ご指摘ありがとうございます。