Webページのデザイン作成には欠かせないCSSですが、最近はデザインだけでなくアニメーションなど表現の部分でも重要になってきました。
状況に合わせて対象を絞り込んでCSSで操作するためには、CSSセレクタの親子関係に関する理解は必須の状況です。
CSSセレクタの意味や考え方、親子関係の作り方などについて紹介します。
CSSセレクタって何？
CSSセレクタは、スタイルを適用する要素を選択するための指示のことを言います。
たとえばCSSのファイルで、
p{color : red;}という表記があれば、pの部分がCSSセレクタに該当します。
これは「すべての<p>要素にcssの{color:red}（文字を赤色にする）を適用しなさい」という意味です。
複雑なものになると、
div p:nth-child(5){
color : red;
}といった表記になってきます。
これは同じように文字を赤色にしますが「<p>要素の親要素<div>の5番目の子要素に対して文字を赤色にしなさい」という指示です。
これだとわかりにくいですが、
<div>
<h4>１つ目の子要素（h4タグ）</h4>
<p>２つ目の子要素（pタグ）</p>
<p>３つ目の子要素（pタグ）</p>
<h5>４つ目の子要素（h5タグ）</h6>
<p>５つ目の子要素（pタグ）</p> <!-- 左の部分が赤くなる -->
<p>６つ目の子要素（pタグ）</p>
<p>７つ目の子要素（pタグ）</p>
</div>ということです。
このように、全体に関係する要素のデザインを設定して作業を効率化したり、特定の要素に絞り込んでスタイルを適用することがCSSセレクタの役割です。
CSSセレクタの親子関係とは？
では、CSSセレクタの親子関係について説明します。
CSSセレクタの親子関係とは、スタイルが適用される順番のことを意味します。
基本的に親の要素を子は受け継いだ上で子に指定された要素を適用することになるため、正しく理解して設定することで作業効率を高めたり可読性を高める効果があります。
<div class="親">
<div class="子">
<div class="孫">
</div>
</div>
<div class="子">
<div class="孫">
</div>
</div>
</div>上のhtmlは、親子関係を簡単に表現したものです。
この時、親クラスに{color : red;}のスタイルが適用されていれば、子クラスや孫クラスについても文字色は赤になります。
逆に、孫クラスに{color : red;}のスタイルが適用されている場合、親クラスや子クラスの文字色は標準のままです。
このように入れ子の構造になっていればわかりやすいですが、実際には構造が見えにくいことも多く、また適用されるCSSセレクタの数も膨大になるため、基本をしっかり理解していないとそのイメージ通りの表現が難しくなってしまいます。
CSSセレクタをうまく利用することにより、親クラスのスタイルを効率よく引き継いで表現することもできますし、親クラスのスタイルを打ち消して表現することも可能です。
【無料あり】エンジニアが解説！プログラミングスクールおすすめ５選CSSセレクタの親子関係の基本法則
では、CSSセレクタの表記と親子関係の基本的な法則について確認しましょう。
スペース区切り
スタイルを適用する要素をスペースで区切った場合、左から該当する要素を絞り込みます。
例：
div p a{color : green;}<div>内の<p>内で使われている<a>要素の文字を緑にします
p .space{padding-left : 2em;}<p>要素中の”space”クラスでは左側の開始位置を２文字分右にずらします
カンマ（,）区切り
スタイルを適用する要素をカンマで区切った場合、並列関係となり、該当する要素に同じくスタイルを適用します。
例：
.test01 , .test02 , #hoge p{ text-decoration : underline;}“test01”クラス、”test02”クラス、”hoge”id内の<p>要素の文字にそれぞれ下線をつけます
E:first-child
E要素の最初の要素だけにスタイルを適用します。箇条書きなどのデザインで便利です。
例：
.list01 li:first-child{border-top : none;}“list01”クラスの最初の<li>要素では上に線をつけません
E:nth-child(n)
E（要素）の後に:nth-child(n)がつく場合、Eの親要素のn番目の子要素にのみスタイルが適用されます。
例：
div p:nth-child(5){color : red;}冒頭の例を参照。
<p>の親要素<div>の５番目の子要素に対してスタイル（この場合は文字を赤にする）を適用
E:nth-of-type (n)
Eの後に:nth-of-type(n)がつく場合、Eの親要素内の兄弟関係にあるEのn番目にスタイルが適用されます。
例：
div p:nth-of-type (5){color : red;}この場合は５番目の<ｐ>要素においてスタイルを適用
E>F
この表記の場合、E要素の子要素になるF要素のみに対してスタイルが適用されます。
つまり、孫要素やそれよりも下の階層の要素に対して影響を与えずに済みます。２つ以上「>」を使うこともできます。
例：
.example > div{color : red;}“example”クラスの子要素にあたる<div>要素にのみスタイルを適用
E+F
この表記では、E要素と同じ階層にある直後のF要素にのみスタイルが適用されます。
例：
.example + p{color : blue;}“example”クラスと同階層にある直後の<p>要素にのみスタイルを適用（下記を参照）
<p>適用されない</p> <p class="example">適用されない</p> <p>適用される</p> <p>適用されない</p>
E~F
この表記では、E要素の後に続く同階層のF要素に対してスタイルが適用されます。
例：
.example ~ p{color : blue;}“example”クラスの後に続く同階層の<p>要素にスタイルを適用（下記を参照）
<p>適用されない</p> <p class="example">適用されない</p> <p>適用される</p> <p>適用される</p>
CSSセレクタの親子関係の基本まとめ
CSSセレクタは、スタイルを適用する要素を指定するために使います。
どのような規則に従って要素が指定されているかがわかれば、実務だけでなく他者の作成したCSSファイルを読みながら勉強することもできます。
習うより慣れろの部分もありますので、苦手意識のある人も自分でCSSを書いてみたり、他の人の作成したファイルを読みながら勉強してみましょう。