CSS Selector

- Element를 쉽고 빠르게 찾기 위해 Selector를 사용한다.

- Selector에 태그 / id / class 를 사용할 수 있다.

1. 태그
1. span { color: red; }
2. id
1. #spantag { color: red; }
2. <p id="spantag">asdf</p>
3. class
1. .spanClass { color: red; }
2. <p class="spanClass">asdf</p>

- id, class 요소 선택자와 함께 활용

- div.myclassname 처럼 .이나 # 앞에 상위 요소를 명시하여 구체적으로 명시할 수 있음

- 그룹 선택

- h1, span, div { color: red; }

- 콤마로 구분하여 여러 태그에 CSS 스타일을 적용하라 수 있음

- 하위 요소 선택

- #asdf span { color: red; }

- asdf id를 가진 태그에 span이라는 하위 요소가 있으면 모든 span 태그에 스타일 적용

- 자식 선택

- #asdf > span { color: red; }

- asdf id를 가진 태그의 자식, 바로 하위의 span 태그에 스타일 적용

- n번째 자식 요소 선택

- #asdf > p:nth-child(2) { color: red; }

- asdf id를 가진 태그의 자식 중 두 번째 자식이 p 태그이면 스타일 적용

- 해당하는 n번째 자식 요소 선택

- #asdf > p:nth-of-type(2) { color: red; }

- asdf id를 가진 태그의 자식 중 두 번째 p 태그에 스타일 적용