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】画像とテキストをレスポンシブでPCで左右交互にスマホで上下にレイアウト【メモ】

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

Font Awesome 5の使い方【概要】

webでよく利用されているアイコンフォントFont Awesomeのバージョン5がいつの間にかリリースされていたので使い方を自分の備忘録として書き留めておきます。 こちらの記事を書く際にまだFont …

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

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

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

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

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

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