기본선택자

전체 선택자

모든 요소를 선택.

/* Selects all elements */
* {
  color: green;
}

유형(태그) 선택자

주어진 태그를 가진 모든 요소를 선택.

/* All <a> elements. */
a {
  color: red;
}

클래스 선택자

주어진 class 특성을 가진 모든 요소를 선택.

/* All elements with class="spacious" */
.spacious {
  margin: 2em;
}

/* All <li> elements with class="spacious" */
li.spacious {
  margin: 2em;
}

/* All <li> elements with a class list that includes both "spacious" and "elegant" */
/* For example, class="elegant retro spacious" */
li.spacious.elegant {
  margin: 2em;
}

id 선택자

요소의 id 특성 값을 비교하여, 완전히 동일한 id를 가진 요소를 선택.

/* id="demo" 요소 선택 */
#demo {
  border: red 2px solid;
}

특성(속성) 선택자

주어진 특성(속성)의 존재 여부나 그 값에 따라 요소를 선택

/* <a> elements with a title attribute */
a[title] {
  color: purple;
}

/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"]
{
  color: green;
}

/* <a> elements with an href containing "example" */
a[href*="example"] {
  font-size: 2em;
}

/* <a> elements with an href ending ".org" */
a[href$=".org"] {
  font-style: italic;
}

/* <a> elements whose class attribute contains the word "logo" */
a[class~="logo"] {
  padding: 2px;
}

그룹선택자

선택자 목록

선택자 목록(,)은 일치하는 모든 요소를 선택.

/* 모든 span과 div 요소 선택 */
span,
div {
  border: red 2px solid;
}

결합자

자손 결합자

""(공백) 결합자는 첫 번째 요소의 자손인 노드를 선택.

/* List items that are descendants of the "my-things" list */
ul.my-things li {
  margin: 2em;
}

자식 결합자

> 결합자는 첫 번째 요소의 바로 아래 자식인 노드를 선택. 자손 결합자보다 더 엄격.

/* List items that are descendants of the "my-things" list */
ul.my-things li {
  margin: 2em;
}

일반 형제 결합자

~ 결합자는 형제, 즉 첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 선택

/* 서로 형제인 문단 중 이미지 뒤쪽인 경우에만 선택 */
img ~ p {
  color: red;
}

인접 형제 결합자

+ 결합자는 인접 형제, 즉 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택

/* Paragraphs that come immediately after any image */
img + p {
  font-weight: bold;
}

링크 가상 클래스

link visited active hover

link는 아직 방문하지 않은 링크에 스타일 적용

visited는 링크를 한 번 이상 방문 했을 때의 스타일 적용

hover는 요소 위에 마우스 커서를 올려놓았을 때 스타일을 적용

focus는 해당하는 요소에 초점이 맞춰졌을 때 스타일을 적용

active는 해당하는 요소를 마우스로 누르고 있을 때(활성화) 스타일을 적용

출처
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors