【CSS】CSSセレクタを使いこなすための親子関係の基本を解説!

[adchord]

Webページのデザイン作成には欠かせないCSSですが、最近はデザインだけでなくアニメーションなど表現の部分でも重要になってきました。

状況に合わせて対象を絞り込んでCSSで操作するためには、CSSセレクタの親子関係に関する理解は必須の状況です。

CSSセレクタの意味や考え方、親子関係の作り方などについて紹介します。

CSSセレクタって何?

CSSセレクタとは

CSSセレクタは、スタイルを適用する要素を選択するための指示のことを言います。

たとえばCSSのファイルで、

という表記があれば、pの部分がCSSセレクタに該当します。

これは「すべての<p>要素にcssの{color:red}(文字を赤色にする)を適用しなさい」という意味です。

複雑なものになると、

といった表記になってきます。

これは同じように文字を赤色にしますが「<p>要素の親要素<div>の5番目の子要素に対して文字を赤色にしなさい」という指示です。

これだとわかりにくいですが、

ということです。

このように、全体に関係する要素のデザインを設定して作業を効率化したり、特定の要素に絞り込んでスタイルを適用することがCSSセレクタの役割です。

CSSセレクタの親子関係とは?

親子関係とは

では、CSSセレクタの親子関係について説明します。

CSSセレクタの親子関係とは、スタイルが適用される順番のことを意味します。

基本的に親の要素を子は受け継いだ上で子に指定された要素を適用することになるため、正しく理解して設定することで作業効率を高めたり可読性を高める効果があります。

上のhtmlは、親子関係を簡単に表現したものです。

この時、親クラスに{color : red;}のスタイルが適用されていれば、子クラスや孫クラスについても文字色は赤になります。

逆に、孫クラスに{color : red;}のスタイルが適用されている場合、親クラスや子クラスの文字色は標準のままです。

このように入れ子の構造になっていればわかりやすいですが、実際には構造が見えにくいことも多く、また適用されるCSSセレクタの数も膨大になるため、基本をしっかり理解していないとそのイメージ通りの表現が難しくなってしまいます。

CSSセレクタをうまく利用することにより、親クラスのスタイルを効率よく引き継いで表現することもできますし、親クラスのスタイルを打ち消して表現することも可能です。

おすすめのプログラミングスクール【無料あり】エンジニアが解説!プログラミングスクールおすすめ5選

CSSセレクタの親子関係の基本法則

CSSの基本法則

では、CSSセレクタの表記と親子関係の基本的な法則について確認しましょう。

スペース区切り

スタイルを適用する要素をスペースで区切った場合、左から該当する要素を絞り込みます。

例:

<div>内の<p>内で使われている<a>要素の文字を緑にします

<p>要素中の”space”クラスでは左側の開始位置を2文字分右にずらします

カンマ(,)区切り

スタイルを適用する要素をカンマで区切った場合、並列関係となり、該当する要素に同じくスタイルを適用します。

例:

“test01”クラス、”test02”クラス、”hoge”id内の<p>要素の文字にそれぞれ下線をつけます

E:first-child

E要素の最初の要素だけにスタイルを適用します。箇条書きなどのデザインで便利です。

例:

“list01”クラスの最初の<li>要素では上に線をつけません

E:nth-child(n)

E(要素)の後に:nth-child(n)がつく場合、Eの親要素のn番目の子要素にのみスタイルが適用されます。

例:

冒頭の例を参照。

<p>の親要素<div>の5番目の子要素に対してスタイル(この場合は文字を赤にする)を適用

E:nth-of-type (n)

Eの後に:nth-of-type(n)がつく場合、Eの親要素内の兄弟関係にあるEのn番目にスタイルが適用されます。

例:

この場合は5番目の<p>要素においてスタイルを適用

E>F

この表記の場合、E要素の子要素になるF要素のみに対してスタイルが適用されます。

つまり、孫要素やそれよりも下の階層の要素に対して影響を与えずに済みます。2つ以上「>」を使うこともできます。

例:

“example”クラスの子要素にあたる<div>要素にのみスタイルを適用 

E+F

この表記では、E要素と同じ階層にある直後のF要素にのみスタイルが適用されます。

例:

“example”クラスと同階層にある直後の<p>要素にのみスタイルを適用(下記を参照)

E~F

この表記では、E要素の後に続く同階層のF要素に対してスタイルが適用されます。

例:

“example”クラスの後に続く同階層の<p>要素にスタイルを適用(下記を参照)

CSSセレクタの親子関係の基本まとめ

CSSまとめ

CSSセレクタは、スタイルを適用する要素を指定するために使います。

どのような規則に従って要素が指定されているかがわかれば、実務だけでなく他者の作成したCSSファイルを読みながら勉強することもできます。

習うより慣れろの部分もありますので、苦手意識のある人も自分でCSSを書いてみたり、他の人の作成したファイルを読みながら勉強してみましょう。