隣接セレクタは、同じ親要素内にある要素Aの直後の要素のスタイルだけを変えたい場合、便利です。CSSでブログの細かい部分を指定して反映させたいときに使います。
基本であるclass・id・子孫セレクタ、子セレクタと子孫セレクタとその違いに続いて、第3弾は『隣接セレクタの使い方』です。CSSが反映されない原因、優先順位を合わせて覚えると、セレクタの使い方が徐々に解ってきますよ。
ある要素の直後のスタイルを変更させる『隣接セレクタ』の使い方を見てみましょう！※要素って何！？ってことなら、下記リンクの見出し『セレクタの種類と、HTMLタグの見方』を見て下さい。
LINKCSSの基本、class・id・子孫セレクタなど！HTMLタグの装飾、セレクタの指定方法と優先順位
隣接セレクタ：同じ親要素内で指定した要素直後の要素を装飾
隣接セレクタは「同じ親要素内」の「要素A」の『直後の要素B』を装飾したいとき使います。なので該当しないのは、「要素C」の「直後の要素B」や、別の親要素内「要素A」の後にある「要素B」、「要素A」の「前にある要素B」は反映しません。
『A + B』隣接セレクタ。Bの反映する箇所
コンテンツ内に沢山ある要素Bだけど、同じ親要素内にAとB。そのAの直後にあるBだけのスタイルを変えたいときに使うセレクタ。A + B{ スタイルの指定 }とセレクタを選択します。
隣接セレクタを使えばAの直後のBのみスタイルが変更されから、Aの直後以外のBには反映させたくないときに使います。どんな場面で使うのかを見ていきましょう♪
隣接セレクタと、複数のセレクタを使用したセレクタの説明
隣接セレクタと合わせて親要素を指定すれば、該当の親要素の中の要素A直後の要素Bなど、細かい指定をしたいときに便利になってきます。
子セレクタや子孫セレクタと、隣接セレクタを複合した場合を見ると指定される該当箇所が変わってくるので、違いを見てみましょう＾＾
基本の隣接セレクタの使い方
1番シンプルな隣接セレクタの使い方は要素Aの『直後の要素B』のセレクタを指定します。CSSは、
- A + B{ スタイルの指定 }
画像のとおり、親要素aの要素Bを見たらAの直後のBのみ該当して、Cの直後、Aの直前に挟まれたBには該当しません。
隣接セレクタA + Bの該当箇所
親要素bも、要素A直後のBは該当します。また、親要素aの最後要素Aの次、（親要素bの1番うえ）要素Bがあるけど、親要素が違うので反映しません。※そもそも要素Aの直後でもないからですね。
子セレクタと複合させた隣接セレクタ
親要素の直下にある要素Aの直後、要素Bを選択してスタイルを指定したいときに使えます。親要素a（限定）直下の、要素Aの直後要素Bのセレクタの指定は
- a > A + B{ スタイルの指定 }
親要素aの子要素Aの直後に隣接したB
親要素bの中、要素A、直後の要素Bには反映しない。ってことですね♪
子孫セレクタと複合させた隣接セレクタ
親要素を指定して、その子孫要素である要素A直後のB要素を指定する場合の該当の違いを見れば、どのようにセレクタを複合させれば良いのか、解りやすいです。
祖先要素αの要素Aの直後の要素Bのセレクタの指定は
- α A + B{ スタイルの指定 }
要素αの中にある、子孫要素が反映されます。要素α中（親要素abの兄弟要素）に要素Aの直後の要素Bがあれば、それも該当します。
※子孫と子セレクタの違いが解りにくいならページを見て下さいね。
擬似要素と複合させた隣接セレクタ
隣接セレクタを複合させ擬似要素（例えば:last-child最後の子要素を指定するとき使うもの）と合わせて使って、細かい指定できます。どんな装飾が可能になるか見てみましょう。
同じ親要素.elementsの段落内にある、『.linkの直後の要素a』がいくつかある内、最後の『.linkの直後の要素a』のフォントサイズのみ30pxに変更させた場合のHTMLとCSS。
.elements .link + a:last-child { font-size: 30px; }
<div class=”elements”>
<p>
同じ段落にある<span class=”link”>.LINK<aタグ>直後のaタグ1つ目。<span class=”link”>.LINK<aタグ>直後のaタグ2つ目。最後の.link直後のa<span class=”link”>.LINK<aタグ>直後のaタグ←最後これのみフォントサイズが30pxに。
</p> // 段落 終了タグ
</div> // div 終了タグ
CSSの説明。
- 親要素『クラスelements』内にある
- 『クラスLINK』の直後にある
- 『a:last-child』（最後aタグの子要素）を指定
- font-size: 30px;にする
表示は下記のように、最後のaタグの文字が30pxに大きくなってるのがわかる。（他は16px）
※<div class=”hoge”></div>、<span class=”geho”></span>。divとspanの違いは、下記リンクの『ブロックレベル要素、インライン要素』で説明してます。
LINK初心者向け、HTMLの入門編！HTMLタグとCSSのセレクタの関係＆要素とは？
クラス属性のclass名の付け方は、上▲リンクの見出し先である▼下記見出しのリンクを参考にどうぞ。
LINK見出し：HTMLタグにclass名を付けカスタマイズしやすくする
色んなセレクタとの組み合わせると、装飾の幅が広がる
子セレクタと子孫セレクタ、擬似要素のみ紹介しましたけど、属性セレクタや擬似クラスと複合させることで、プラグインとか複雑なセレクタのスタイルを幅ひろく装飾することも可能になって、カスタマイズが楽しくなってきます＾＾
ブログ書くのは好きだけど、CSSを触るのはまだまだ慣れないけど、色々触って反映しないなぁ・・って思ったら、色んなセレクタを指定すると反映されたら、めちゃくちゃ嬉しいですから、ゆっくり覚えていきましょう！
それでは、かうたっくでした♪
Comments