2つ先の要素を指定する

2017.04.12

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

サンプルコード

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

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

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

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

【参考サイト】

土