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

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

AD

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

nextAll()

指定要素以降の兄弟要素を取得します。
たとえば以下のようなコードの場合、4と5のdivの文字が赤になります。

prevAll()

指定要素以前の兄弟要素を取得します。
たとえば以下のようなコードの場合、1と2のdivの文字が赤になります。

nextUntil()

指定要素からnextUntilの引数で指定された要素までの兄弟要素を取得します。
たとえば以下のようなコードの場合、4,5,6の文字が赤になります。

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

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

まとめたDEMO

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

たとえば以下のようなHTMLがあったとして、4~6だけ適用させたい場合の例です。
jQueryで言うところのnextAll()です

兄弟要素を取得する間接セレクタ(~)を使い、以下のようにします。

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

先程とは逆に指定要素以前に適用する例です。
jQueryで言うところのprevAll()です

以下のHTMLの場合で1,2,3にだけ適用します。

兄弟要素の最後n個に適用する

並列に並んだ要素の最後n個のみに適用する例です。
たとえば以下のHTMLで最後3個(6,7,8)にスタイルを適用させます。

横3個にブロックを並べたレイアウトで、最後の一行だけmargin-bottomを大きく取りたい、みたいなときに使えます。

特定要素に挟まれた要素に適用させる

以下のような見出し(h3)と各種要素で構成されるHTMLで、見出し以外にスタイルを適用させたい場合の例です。
jQueryでいうと $('h3').nextUntil('h3'); の処理です。

まとめ

昔はIEのせいでjQuery頼りだった処理もずいぶん楽できるようになりました...。
Sassのmixinなどを使えばさらに便利に使えるかもしれませんね。

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

匿名 さんより
prevAll( )の欄もnextAll( )になっちゃってます。
管理人 さんより
すみません、間違ってました…。
ご指摘ありがとうございます。