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】スマホでbackground-attachment: fixed;が効かない【メモ】

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

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

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

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

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

【Bootstrap4】グリッドレイアウト基本

今一番利用されているCSSフレームワークBootstrap。自分でも何度か利用しましたが他の方のコーディングしたものでもベースにBootstrapを利用しているのを良く見かけます。 そこで、基本のグリ …

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

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