niwaka-web

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

CSS

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

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

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

参照ページ

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

-CSS
-

執筆者:


comment

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

関連記事

【CSS】画像とテキストをレスポンシブでPCで左右交互にスマホで上下にレイアウト【メモ】

今回の記事は、前回の記事の続きになります。 レスポンシブサイトでよく見かける画像とテキストを左右交互に、スマホで上下に配置してくレイアウトをflexboxを利用して実装する方法の個人的メモ。 ようやく …

【CSS】擬似クラス「構造擬似クラス」の使い方の覚書

ニワカが個人的に使いこなせていないCSSを覚えるための個人的メモです。 擬似クラスは数が多いので、まずは「構造擬似クラス」の覚書。他の擬似クラスは別ページで作成予定。 「擬似要素と擬似クラスの違いの覚 …

Font Awesome 5の使い方【Web Fonts with CSS編】

Font Awesome 5の使いとしては、SVG with JavaScript(JavaScriptとSVGによる描画)とWeb Fonts with CSS(CSSとwebフォントによる描画)の …

【Bootstrap4】グリッドレイアウト(列の自動レイアウト)

Bootstrap4のグリッドレイアウトの説明は長いので列の自動レイアウトは別ページに。 Bootsatrap4からはグリッドシステムにcss3のflexboxが利用されるようになりました。 .col …

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

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