「CSS」すべてのCSSセレクタリスト

タグタイプセレクタ

CSS: p { ... }たとえば、このHTML要素を選択した場合:

<p>Some text...</p>

このオプションでは、このタグタイプのすべてのHTML要素が選択されます.

アイデンティティーセレクタ

CSS: #some-id { ... }たとえば、このHTML要素を選択した場合:

<h1 id="some-id">...</h1>

このセレクタは、このIDを持つ要素を選択します(ページごとに1回しか選択できません).

クラスセレクタ

CSS: .some-class { ... }たとえば、このHTML要素を選択した場合:

<h1 class="some-class">...</h1>

この選択プログラムでは、クラスが存在するすべてのHTML要素が選択されます.

属性セレクタ

CSS: [src] { ... }たとえば、このHTML要素を選択した場合:

<img src="...">

このオプションでは、このHTML属性を含むすべての要素が選択されます.

ユニバーサルセレクタ

CSS: * { ... }たとえば、このHTML要素を選択した場合:

<p>....</p><img ...>

このオプションでは、すべてのHTML要素を選択します(継承するのではなく、すべてのHTML要素を個別のターゲットとして直接指定します).

グループ選択プログラム/選択プログラムリスト

CSS: p, .some-class { ... }たとえば、このHTML要素を選択した場合:

<p>...</p><h2 class="some-class">...</h2>

この選択者は、リスト内の各選択者に一致するすべての要素を選択します.

マージセレクタ

CSS: p.some-class { ... }たとえば、このHTML要素を選択した場合:

<p class="some-class">...</p>

このセレクタは、この2つの条件を満たすすべての要素(たとえば、この例の「som-class」クラスの「<p>」要素)を選択します.

医師選択者

CSS: a:hover { ... }たとえば、このHTML要素を選択した場合:

  <a>...</a>(사용자가 해당 요소 위로 마우스를 가져갈 때)

このセレクタは、この「希望状態」を満たすすべての要素(すなわち、この例で指すすべてのリンク)を選択します.
参考資料:https://www.udemy.com/course/100-2022-web-development