[CSS] 모든 CSS 선택자 리스트

태그 유형 선택자

CSS: p { ... }
예를 들어 이 HTML 요소를 선택하면:

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

이 선택자는 이 태그 유형의 모든 HTML 요소를 선택합니다.

아이디 선택자

CSS: #some-id { ... }
예를 들어 이 HTML 요소를 선택하면:

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

이 선택자는 이 ID가 있는 요소를 선택합니다(페이지당 한 번만 가능)

클래스 선택자

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>

이 선택자는 두 조건을 모두 충족하는 모든 요소를 ​​선택합니다(예: 이 예제에서는 "some-class" 클래스가 있는 "<p>" 요소)

의사 선택자

CSS: a:hover { ... }
예를 들어 이 HTML 요소를 선택하면:

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

이 선택기는 이 "의사 상태"를 충족하는 모든 요소를 ​​선택합니다(즉, 이 예에서 가리키고 있는 모든 링크)

참고 자료 : https://www.udemy.com/course/100-2022-web-development