niwaka-web

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

CSS

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

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

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

子セレクタの概要

子セレクタは、ある要素(親要素)の直下にある要素(子要素)を対象とするセレクタ。別名、子供セレクタ、直下セレクタ。
親要素と子要素を「>」(記号の大なり)で区切って記述。

親要素 > 子要素 {
  プロパティ: 値;
}

子セレクタの使用例

子セレクタの使用例をhtmlとcssと共に紹介。

html

<body>
  <p>子要素</p>
  <div>
    <p>孫要素</p>
  </div>
</body>

css

body > P {
  color:red;
  font-size:32px;
  font-weight: bold;
}

実際の表示

親要素の直下にあるpタグ内の要素にはスタイルが反映され、親要素の直下に置いていないpタグ内の要素には影響しない。

個人的メモ

使いどころがすぐには思い浮かばないが、上記の例のように子孫セレクタだと下の要素にまでスタイルが適用されてしまうので、子セレクタを上手に使うと効率的で汎用性が上がったCSSが書けるのかも。

一応、IEはIE7以降対応のセレクタ。

参照ページ

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

-CSS
-

執筆者:


comment

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

関連記事

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

ニワカが個人的に使いこなせていないCSSを覚えるための個人的メモです。 擬似クラスの「構造擬似クラス以外」の覚書。 「擬似クラス「構造擬似クラス」の使い方の覚書」はこちら 目次 擬似クラスの概要 リン …

【Bootstrap4】グリッドレイアウト(並べ替え)

Bootstrap4のグリッドレイアウトの説明は長いので並べ替えも別ページに。 Bootsatrap4からはFlexboxを利用した列の順序変更が出来るようになりました。(記述したソースの順番ではなく …

【CSS】flexboxの使い方の覚書

ニワカが個人的に使いこなせていないCSSを覚えるための個人的メモです。 flexboxの覚書。 仕様がよく変わり、IEの対応が遅れていたこともあり便利そうだがなかなか使えませんでしたが、そろそろ使えそ …

【CSS】擬似要素と擬似クラスの違いの覚書

ニワカが個人的に使いこなせていないCSSを覚えるための個人的メモです。 擬似要素と擬似クラスをまとめる前に違いを覚えておくためのメモ。 最初に書いておくとW3Cの日本語訳や色々なサイトを見ましたが、小 …

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

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