2022-08-13

CSSで直前の要素を取得するセレクタはある？

CSSで直前の要素を取得したい場合、 該当するセレクタは残念ながらありません。

具体的には下のようなHTML構造で、 「id="hoge"」の直前にあるp要素を取得できる セレクタはありません。

<p>コンテンツ1</p>
<div id="hoge">コンテンツ2</div>

直前の要素を取得する方法

CSSのセレクタでは取得できないので、 代替手段としてjQueryのprev()メソッドを使います。

<p>コンテンツ1</p>
<div id="hoge">コンテンツ2</div>

var elem = $("#hoge").prev();

console.log(elem.text()); // コンテンツ1

上のようにprev()メソッドを使う事で直前の要素を取得できます。