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

コラム

COLUMN

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

HTML/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

本日無料のプログラミング体験 or相談会の実施が可能です。(60分程度)

女性