ニワカが個人的に使いこなせていないCSSセレクタを覚えるための個人的メモです。
使いこなせてないCSSセレクタ第二弾「隣接セレクタ」の覚書。
隣接セレクタの概要
隣接セレクタは、要素と要素が直接隣接している場合のみに適用されるセレクタ。要素と要素の間に別の要素が有る場合は対象にならない。別名、隣接兄弟セレクタ。
要素と要素を「+」（記号のプラス）で区切って記述。
要素 + 要素 {
プロパティ: 値;
}
隣接セレクタの使用例
隣接セレクタの使用例をhtmlとcssと共に紹介。
html
<h1>タイトル</h1>
<p>ここは隣接しているからスタイルが反映されます。</p>
<p>ここは隣接していないのでスタイルは適用されません。</p>
css
h1 + P {
color:red;
font-weight: bold;
}
実際の表示
要素のすぐ側に書いた要素にはスタイルが適用されるが、その後の要素にはスタイルは適用されない。まさに隣接した要素だけに適用される。
Qiitaのページを参考にもう一例
See the Pen 【CSS】隣接セレクタの使用例02 by westeast773 (@niwaka-web) on CodePen.
リストを横並びにした際に、間にラインを入れた時に打ち消すcssなどを追加せずに無駄なく出来る感じ。
個人的メモ
こちらも使いどころがすぐには思い浮かばないが、適用範囲を制限できるので上手に使うと効率的で汎用性が上がったCSSが書けるのかなと。
子セレクタと同様こちらも、IEはIE7以降対応のセレクタ。
参照ページ
記事にする際に参考にさせていただいたページ
