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を覚えるための個人的メモです。 擬似要素と擬似クラスをまとめる前に違いを覚えておくためのメモ。 最初に書いておくとW3Cの日本語訳や色々なサイトを見ましたが、小 …

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

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

Font Awesome 5の使い方【SVG with JavaScript編】

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

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

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

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

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

S