サイト制作に関するメモ書き

HOME > HTML・CSS > 2つ先の要素を指定する

2つ先の要素を指定する

あまり使う機会はないかもしれないですが、指定した要素から見て2つ隣の要素に対してCSSを指定する方法をメモ。

サンプルコード

隣接セレクタを繋げて記述することで実装できました。

HTML

<p>2つ前</p>
<p>1つ前</p>
<p class="current">ここが基準</p>
<p>1つ先</p>
<p>2つ先</p>
<p>3つ先</p>

CSS

.current + p + p {
	color: #ff0000;
}

2つ先の要素を指定するデモページ
3つ以上隣の場合も繋げる隣接セレクタを増やせば実装できます。
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP