<aside> <img src="/icons/chat_gray.svg" alt="/icons/chat_gray.svg" width="40px" /> Udemy **The Web Developer 부트캠프** 강의를 참조하여 작성한 글입니다.

</aside>

자손 선택자 (descendant selector)

• 첫 번째 선택자와 일치하는 조상 요소가 있는 경우에 두 번째 선택자와 일치하는 요소를 선택

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

인접 선택자 (adjacent selector)

• 두 번째 요소가 첫 번째 요소 바로 뒤에 있고 둘 다 동일한 부모 요소의 자식인 경우에 두 번째 선택자와 일치하는 요소를 선택

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

자식 선택자 (child selector)

• 첫 번째 선택자로 일치하는 요소의 직접 자식인 요소 중 두 번째 선택자와 일치하는 요소를 선택

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

속성 선택자 (attribute selector)

• 지정된 속성이 명시적으로 설정된 요소를 선택

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

가상 클래스 (pseudo class)

• 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있음