隣接セレクタとは、同じ階層で指定した要素の直後にある要素（同じ階層なので兄弟要素）だけを選択することができるCSSセレクタです。
例えば、見出しの後にある段落だけにマージンを設定したり、リストの最初の項目だけに太字を指定したりすることができます。このような場合に便利なのが隣接セレクタです。
この記事では覚えておくと便利な隣接セレクタの使い方と実際の使用例についてまとめています。
隣接セレクタの書き方
隣接セレクタの書き方は、「要素A + 要素B」となります。
要素A + 要素B {
プロパティ: 値;
}これにより、要素Bにスタイルが適用されます。
隣接セレクタが適用される条件
隣接セレクタのスタイルが適用するためには以下の条件が揃っていることが必要です。
- 選択したい要素が隣接していること
隣接セレクタは、特定の要素の直後に隣接する要素になります。スタイルを適用したい要素が隣り合っている必要があります。 - 隣接している要素が同じ親要素内に存在すること
隣接セレクタは、指定した要素の直後に隣接する要素を選択するため、選択した要素と隣接している要素は、同じ親要素内に存在する必要があります。 - CSS3がサポートされていること
隣接セレクタは、CSS3で導入されたセレクタの1つです。なので隣接セレクタを使用するためには、CSS3以上がサポートされているブラウザを使用する必要があります。
隣接セレクタの使用例1: リストで2番目以降のliだけにスタイルを適用する
ナビゲーションなどでリスト表示する時にliタグの間にマージンを開けたり、ボーダーを引いたりしたい時、隣接セレクタを使うと2番目以降のliにだけスタイルを適用することができます。
See the Pen 隣接セレクタ by mixtaro (@mixtaro) on CodePen.
li + li {
border-top: 1px solid #fff;
}隣接セレクタの使用例2: アコーディオンメニューでクリックされた要素を開くスタイル
クリックで開閉するアコーディオンメニューをCSSだけで実装する場合、checkboxやradioなどinputタグを使います。クリックした時にコンテンツが開くスタイルに隣接セレクタを使って実装できます。
.accordion input:checked + label + .acc-content {
max-height: 1000px;
transition: max-height 0.4s ease-in-out;
}
.acc-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-in-out;
}CSSのみでアコーディオンを実装する詳細は下記の記事でまとめています。>> クリックで開閉アコーディオンメニューCSSのみ、jQuery、JavaScriptで作るサンプル
隣接セレクタの使用例3: 画像に隣接するh2,pタグだけにスタイルを適用する
ブログ記事一覧などでよく使われるカードスタイルで隣接セレクタを使ってスタイルを適用する例です。
See the Pen 隣接セレクタの使用例2 by mixtaro (@mixtaro) on CodePen.
img + h2{
margin-top:8px;
}
h2 + p{
margin-bottom:30px;
}このように隣接セレクタを使用することで、HTMLコードに対してスタイルを適用することができるのでわざわざclassを追加する必要がなく、コードの量を減らすことができます。
また、複数の要素に対して同じスタイルを適用する場合にも、隣接セレクタを使用することで、コードの重複を避けることができるので特定のパターンやレイアウトを実現する際に役立ちます。
覚えておくと便利なCSSのテクニックです。
隣接セレクタ以外のも利用機会の多いCSSセレクタについてまとめた記事が参考になるかもしれません。
