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

解説記事はこちら

兄弟要素のn個目以降に適用するセレクタ

たとえば、4個目以降の要素にスタイルを適用させたい場合。
$('div:nth-child(3)').nextAll();　のようなもの。

1
2
3
4
5
6
.sample1 div:nth-child(3) ~ div {
	background: #f33;
}

兄弟要素のn個目以前に適用するセレクタ

たとえば、3個目までの要素にスタイルを適用させたい場合。
$('div:nth-child(4)').prevAll();　のようなもの。

1
2
3
4
5
6
/* 4,5,6...番目の要素が:notで除外される */
.sample2 div:not(:nth-child(n + 4))  {
	background: #f33;
}

兄弟要素の最後n個に適用するセレクタ

たとえば、最後3個の要素にスタイルを適用させたい場合。 $('div:nth-last-child(4)').nextAll();　のようなもの。

1
2
3
4
5
6
7
8
/* :nth-last-childは「最後からn番目」に適用されるセレクタです
IE9以降で対応しています。
*/
.sample3 div:nth-last-child(4) ~ div  {
	background: #f33;
}

特定要素に挟まれた要素に適用させるセレクタ

たとえば、h3に挟まれた要素にスタイルを適用させたい場合。 $('h3').nextUntil('h3');　のようなもの。

見出し

1

2

見出し

1

見出し

1
2

見出し

1
2
.sample4 h3 ~ *:not(h3)  {
	background: #f33;
}