【HTML5/CSS3】jQueryのnextAll()・prevAll()・nextUntil()みたいな処理をCSSでやってみる | Wood-Roots:blog

2017
02/22

jQueryのnextAll()・prevAll()・nextUntil()みたいな処理をCSSでやってみる

jQueryでのnextAll()・prevAll()・nextUntil()のような処理をCSSのみで実現できないかと思い、考えてみました。

ADs

ちなみに：jQueryでのnextAll()・prevAll()・nextUntil()について

nextAll()

指定要素以降の兄弟要素を取得します。
たとえば以下のようなコードの場合、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>

prevAll()

指定要素以前の兄弟要素を取得します。
たとえば以下のようなコードの場合、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()

指定要素から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>

これをCSSだけでやってみる

古いIEを切れなかった時代はjQueryに頼りましたが、CSSの各種セレクタを使えばできるのではないかと思いやってみました。

まとめたDEMO

兄弟要素のn個目以降に適用する

たとえば以下のような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;
}

兄弟要素のn個目以前に適用する

先程とは逆に指定要素以前に適用する例です。
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個に適用する

並列に並んだ要素の最後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

Related Articles関連記事

Post Comments

メールアドレスが公開されることはありません。

Comments

prevAll( )の欄もnextAll( )になっちゃってます。

  • 匿名
  • 2017年5月22日 2:17 PM

すみません、間違ってました…。
ご指摘ありがとうございます。

  • 管理人
  • 2017年5月22日 10:15 PM

Category

Archive

Search

Social