ニワカが個人的に使いこなせていないCSSセレクタを覚えるための個人的メモです。
使いこなせてないCSSセレクタ第3弾「間接セレクタ」の覚書。
間接セレクタの概要
間接セレクタは、親要素が同じ兄弟関係の弟に適用されるセレクタ。隣接セレクタは直後の弟に対してのみに対し、兄弟関係であれば間に別の要素が入っても適用される。別名、一般兄弟セレクタ。
要素と要素を「~」（記号のチルダ）で区切って記述。
要素 ~ 要素 {
プロパティ: 値;
}
間接セレクタの使用例
間接セレクタの使用例をhtmlとcssと共に紹介。
html
<p>適用されない</p>
<h2>タイトル</h2>
<p>スタイルが適用される</p>
<p>スタイルが適用される</p>
css
h2 ~ P {
color:red;
}
実際の表示
要素（ここではh2）の後に出てくる要素（p）にだけ適用される。
h2より前に書いたpタグにはもちろん適用されない。
間に挟んだspannタグ内にも適用されない。
個人的メモ
関節セレクタは、指定した要素Aの後に登場する、指定した要素B全てに適用される。
隣接セレクタは、指定した要素Aの直後に登場する、指定した要素Bだけに適用される。
CSS3で追加されたセレクタで、子セレクタ、隣接セレクタと同様にIEはIE7以降対応のセレクタ。
参照ページ
記事にする際に参考にさせていただいたページ
