niwaka-web

webサイト構築関連のにわか知識集

CSS

【CSS】隣接セレクタの使い方の覚書

投稿日:2017年6月8日 更新日:

ニワカが個人的に使いこなせていない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以降対応のセレクタ。

参照ページ

記事にする際に参考にさせていただいたページ

-CSS
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【CSS】スマホでbackground-attachment: fixed;が効かない【メモ】

ニワカが個人的に使いこなせていないCSSを覚えるための個人的メモです。 CSSでパララックス(視差)の勉強していた際のメモです。 iosでbackground-attachment: fixed;は仕 …

【CSS】flexboxで画像とテキストを横並び、縦並びにレイアウト【メモ】

レスポンシブサイトでよく見かける画像とテキストを左右交互に、スマホで上下に配置してくレイアウトをflexboxを利用して実装する方法の個人的メモ。 ようやく最近使用するようになったflexboxの学習 …

【CSS】属性セレクタの使い方の覚書

ニワカが個人的に使いこなせていないCSSセレクタを覚えるための個人的メモです。 使いこなせてないCSSセレクタ第4弾「属性セレクタ」の覚書。 目次 属性セレクタの概要 属性セレクタの使用例 個人的メモ …

【CSS】間接セレクタの使い方の覚書

ニワカが個人的に使いこなせていないCSSセレクタを覚えるための個人的メモです。 使いこなせてないCSSセレクタ第3弾「間接セレクタ」の覚書。 目次 間接セレクタの概要 間接セレクタの使用例 個人的メモ …

【CSS】子セレクタの使い方の覚書

ニワカが個人的に使いこなせていないCSSセレクタを覚えるための個人的メモです。 サイト作成をする際にCSSは何百行、何千行にもなることがあるので、出来るだけわかりやく汎用的に書ける様にするために覚えて …