はじめに

新入社員教育でウェブ開発について学習しています。
今回は学習の中で複雑だと感じた、
CSSセレクターの種類や記述方法についてまとめました。

CSSとは

CSS（Cacading Style Sheets）とは、
Webページ内の文字（テキスト）、画像や動画の幅、余白を指定したり、
それぞれの表示箇所を指定してレイアウトを決めたりするプログラミング言語です。

app.css

h1 {
    color:green;
}

CSSの構成要素

cssの記述は

セレクタ（どの要素？）
プロパティ（なにを？）
値（どんな風に？）
の３つの要素でできている。

「h1」がCSSセレクターに相当し、
h1{・・・}と記載することでh1タグで囲った要素のみスタイルを指定させています。

〇〇{・・・}の〇〇部分をCSSセレクターと呼びます。

セレクターの種類

区分	セレクタの種類	説明	記述例
基本	全称セレクタ	すべての要素を対象にします。	*
基本	要素型セレクタ	h1のようなタグで記述する要素を対象にします。	h1
基本	IDセレクタ	ID指定した要素を対象にします。	#test
基本	クラスセレクタ	クラス指定した要素を対象にします。	.test
基本	属性セレクタ	指定した属性を持つ要素を対象にします。	h1[id]
基本	疑似クラス	マウスが上にある時や最初の要素など特定状態の要素を対象にします。	a:hover
基本	疑似要素	最初の行や文字など、要素内の特定の場所を対象にします。	p::first-line
結合	グループ化セレクタ	複数の要素をまとめて(グループにして) 対象にします。	h1, p
結合	小孫結合子	特定の親要素を持つ子要素や孫要素を対象にします。	div p
結合	子結合子	特定の親要素を持つ子要素だけを対象にします。	div > p
結合	隣接兄弟結合子	同じ階層にある次の要素を対象にします。	h1 + p

CSSで複数のclass名を指定(結合)

class名を「 , ( カンマ ) 」で区切る
class名を「 ( 半角スペース ) 」で区切る
class名を繋げて記述
class名を「 + ( プラス ) 」で区切る
class名を「 > ( 大なり記号 )」で区切る

HTMLは以下のものを使用します。

index.html

 <div class="parent1">
     <p class="p1 child1">子要素A</p>
     <p class="child2">子要素B</p>
     <p class="child3">子要素C</p>
 </div>
   <div class="parent2">
     <p class="child1">子要素D</p>
     <div class="child2">
         子要素E
         <p class="grandchild">子孫要素e</p>
     </div>
   </div>

1. class名を「 `,` ( カンマ ) 」で区切る

css

.child1,.child2 {
 color: red;
}

【結果】

class名がchild1とchild2の要素の文字が赤くなる

2. class名を「 ( 半角スペース ) 」で区切る

css

.parent2 .child1 {
 color: red;
}

【結果】

parent2を親要素に持つchild1が適用範囲となる

3. class名を繋げて記述

css

.p1.child1 {
 color: red;
}

【結果】

class名にp1とchild1の両方がある要素のみが適用範囲となる

4. class名を「 `+` ( プラス ) 」で区切る

css

.child2 + p {
  color: red;
}

【結果】

child2と同じ階層の、すぐ後のp要素にだけ適用される

5. class名を「 `>` ( 大なり記号 ) 」で区切る

css

.parent2 > p {
  color: red;
}

【結果】

parent2の、1つ下の階層にあるp要素を指定する

参考