CSS セレクタの一覧とIDセレクタとクラスセレクタ

セレクタは、CSSを適用する場所を指定するもので種類があります。

セレクタ名	書き方(例)	対象	説明
要素セレクタ	p	<p>	タグ名で指定。全ての同じ要素に適用。
IDセレクタ	#a1	id="a1"の要素	ページ内で一意のIDを持つ要素を指定。
クラスセレクタ	.b1	class="b1"の要素	同じクラス名を持つ複数要素に適用。
属性セレクタ	[type="text"]	type="text" の要素	属性や値で要素を指定。
全称セレクタ	*	すべての要素	ページ内の全ての要素に適用。
子孫セレクタ	div p	<div>内の<p>	親の中に含まれるすべての子孫要素。
子セレクタ	div > p	<div>の「直下の」<p>	一階層下の子要素だけに適用。
隣接兄弟セレクタ	h1 + p	<h1>の直後の<p>	すぐ隣にある兄弟要素。
一般兄弟セレクタ	h1 ~ p	<h1>の後のすべての<p>	同じ親を持つ後続の兄弟要素。
グループセレクタ	h1,h2,h3	h1～h3	複数セレクタをまとめて指定。
疑似クラスセレクタ	a:hover	リンクにマウスを重ねた時	要素の状態によって変化。
疑似要素セレクタ	p::before	<p>の前	要素の前に内容を追加。

IDセレクタは、1つのhtml文書内で1つだけのユニークなものである必要があります。
先頭にシャープ(#)がつきます。

クラスセレクタは、1つのhtml文書内に複数設定しても問題ありません。
先頭にドット(.)がつきます。

IDセレクタの例

<style>
  #a2 {
    color: red;
  }
</style>

<p id="a1">あいうえお</p>
<p id="a2">あいうえお</p>
<p id="a3">あいうえお</p>

2行目は、IDセレクタです。先頭にシャープ(#)がついています。
7～9行目までid=がありますが、id="a2"がある8行目の文字の色が赤になります。

クラスセレクタの例

<style>
  .a1 {
    color: red;
  }
</style>

<p class="a1">あいうえお</p>
<p class="a1">あいうえお</p>
<p class="a1">あいうえお</p>

２行目は、クラスセレクタです。先頭にドット(.)がついています。
7～9行目には、それぞれclass="a1"があります。7～9行目の文字の色が赤色になります。

IDセレクタとクラスセレクタが同じ名称の場合

<style>
  #p1 {
    background: yellow;
  }
  .p1 {
    color: red;
  }
</style>
<p id="p1" class="p1">あいうえお</p>

2行目のIDと5行目のクラスは同じ名称ですがそれぞれ機能します。
9行目は背景色は黄色で文字は赤になります。