20230327[CSS 선택자 총정리]

기본 선택자

1. 전체 선택자 ( * )

CSS 전체 선택자(*)는 모든 형태의 모든 요소를 선택합니다.

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

2. 유형 선택자

CSS 유형 선택자는 노드 이름을 사용해 요소를 선택합니다. 즉 문서 내에서 주어진 유형의 모든 요소를 선택합니다.

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

3. 클래스 선택자

CSS 클래스 선택자는 요소의 class 특성에 기반해 요소를 선택합니다.

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

4. ID 선택자

CSS ID 선택자는 요소의 id 특성 값을 비교하여, 완전히 동일한 id를 가진 요소를 선택합니다.

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

5. 특성 선택자

CSS 특성 선택자는 주어진 특성의 존재 여부나 그 값에 따라 요소를 선택합니다.

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

그룹 선택자

1. 선택자 목록

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

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

결합자

1. 자손 결합자

보통 한 칸의 공백 문자로 표현하는 자손 결합자(" ")는 두 개의 선택자를 조합하여, 뒤쪽 선택자 요소의 조상(부모, 부모의 부모, 부모의 부모의 부모...)에 앞쪽 선택자 요소가 존재할 경우 선택합니다. 자손 결합자를 활용하는 선택자를 자손 선택자라고 부릅니다.

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

2. 자식 결합자

자식 결합자(>)는 두 개의 CSS 선택자 사이에 위치하여 뒤쪽 선택자의 요소가 앞쪽 선택자 요소의 바로 밑에 위치할 경우에만 선택합니다.

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

3. 일반 형제 결합자

일반 형제 결합자(~)는 두 개의 선택자 사이에 위치하여 뒤쪽 선택자의 요소와 앞쪽 선택자 요소의 부모 요소가 같고, 뒤쪽 선택자의 요소가 뒤에 위치할 때 선택합니다. 두 요소가 서로 붙어있을 필요는 없습니다.

p ~ span {
  color: red;
}

<span>이건 빨강이 아닙니다.</span>
<p>여기 문단이 있습니다.</p>
<code>그리고 코드도 있습니다.</code>
<span>이제 빨강입니다!</span>
<code>더 많은 코드가 있습니다.</code>
<span>이것도 빨강입니다!</span>

4. 인접 형제 결합자

인접 형제 결합자(+)는 앞에서 지정한 요소의 바로 다음에 위치하는 형제 요소만 선택합니다.

li:first-of-type + li {
  color: red;
}

<ul>
  <li>One</li>
  <li>Two!</li>
  <li>Three</li>
</ul>