【HTML / CSS基礎】よく使われるCSSセレクタについて

みなさんCSSセレクタはご存知でしょうか？ 今回はよく見かけるCSSセレクタ5つをご紹介します。

これまで何となく使っていた人やあまり使ってこなかった人は、この機会にしっかりと理解して使いこなせるようになりましょう！

CSSセレクタとは

CSSセレクタとは、どの要素にCSSを適用させるかを決定する部分です。 左の例だと、「p」がセレクタになります。

このように直接要素を指定する書き方は、「要素セレクタ」に分類されます。

（ちなみに「color」はプロパティ、「red」はプロパティ値と呼びます）

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

CSSセレクタの種類

今回は、よく見かける以下5つのCSSセレクタをご紹介します。

全称セレクタの指定 子孫セレクタの指定 子セレクタの指定 隣接セレクタの指定 同階層で要素の後ろの指定 1つずつ見ていきましょう。

全称セレクタの指定

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

「*」（アスタリスク）を指定すると、全ての要素にCSSを適用できます。

子孫セレクタの指定

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

「セレクタA セレクタB」とすることで、セレクタAの子孫要素である全てのセレクタBにCSSを適用できます。

この例だと、「.wrapper」クラスの子孫要素である全ての「h2」要素にCSSを適用されます。

セレクタAとセレクタBの間が全角スペースだとうまくいかないので注意しましょう。

子セレクタの指定

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

指定した要素の直下の子要素にCSSを適用できます。

隣接セレクタの指定

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

指定した要素の直後の要素にCSSを適用できます。この場合、.wrapperとpは同階層である必要があります。

同階層で要素の後ろの指定

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

指定した要素の後ろにある要素にCSSを適用できます。隣接セレクタと同様に.wrapperとpが同階層にある必要があります。隣接セレクタは直後の要素ですが、こちらは、後ろの要素全てが対象です。 CSSセレクタはCSSをコーディングする際の基本です。 自分でコーディングしなくても他人がコーディングしたCSSを見る機会はあるので、しっかりおさえておきましょう。 お読みいただき、ありがとうございました。 ＜参考リンク＞

CSSセレクター MDN Web Docs

全国どこにいても学べる！超優良のプログラミングスクールまとめました
【国内完全網羅】現役エンジニアが厳選したおすすめのプログラミングスクール

自分の住んでるエリアでプログラミングスクールを探したい⭐️

エリア別で、おすすめのプログラミングスクールをまとめました。

ぜひ参考にしてみてくださいね。

北海道 / 東北

北海道 / 青森 / 秋田 / 岩手 / 山形 / 福島

関東

群馬 / 栃木 / 埼玉 / 茨城 / 東京 / 千葉 / 神奈川

中部

福井 / 石川 / 岐阜 / 愛知 / 富山 / 長野 / 山梨 / 静岡 / 新潟

近畿

兵庫 / 京都 / 大阪 / 滋賀 / 奈良 / 三重 / 和歌山

中国

山口 / 島根 / 鳥取 / 広島 / 岡山

四国

愛媛 / 香川 / 高知 / 徳島

九州 / 沖縄

長崎 / 佐賀 / 熊本 / 福岡 / 大分 / 宮崎 / 鹿児島 / 沖縄