CSS 선택자

👣 개요

CSS 선택자는 웹 페이지의 HTML 요소들을 선택하여 스타일을 적용하거나
자바스크립트로 조작하는데 사용되는 표기법입니다.
CSS 선택자를 사용하면 원하는 요소를 정확하게 선택하여
스타일을 지정하거나 조작할 수 있습니다.

1. 전체 선택자 (*)
모든 요소를 선택합니다.

* {
	/* 스타일 설정 내용 */
}

2. 요소 선택자
특정 HTML 요소를 선택합니다.

p {
	/* 스타일 설정 내용 */
}

3. 클래스 선택자 (.classname)
특정 클래스를 가진 요소를 선택합니다.

.class {
	/* 스타일 설정 내용 */
}

4. ID 선택자 (#idname)
특정 ID를 가진 요소를 선택합니다.

#ID {
	/* 스타일 설정 내용 */
}

5. 자식 선택자 (parent > child)
특정 부모 요소의 직계 자식 요소를 선택합니다.

ul > li {
	/* 스타일 설정 내용 */
}

6. 후속 형제 선택자 (element ~ sibling)
지정된 요소 이후의 모든 동등 형제 요소를 선택합니다.

h2 ~ p {
	/* 스타일 설정 내용 */
}

7. 인접 형제 선택자 (element + sibling)
지정된 요소 바로 뒤의 형제 요소[1 개만 선택]를 선택합니다.

h2 + p {
	/* 스타일 설정 내용 */
}

8. 그룹화 선택자 (selector1, selector2)
여러 선택자를 쉼표로 구분하여 그룹화합니다.

h1, h2, h3 {
    /* 스타일 설정 내용 */
}