CSS 선택자를 잘 알고 적재적소에 사용할 줄 알면 정말 편리하다.
더 이상 클래스 이름을 짓느라 머리를 싸매지 말자...😂
1. 똑같은 선택자를 사용하면 뒤에 오는 것의 우선순위가 높다. (덮어 씌우니까)
2. 아이디 선택자 > 클래스 선택자 > 태그 선택자 별로 우선 순위가 높다.
3. 클래스를 여러 개 가질 수 있다.
4. 자손 결합자
어떤 요소 안에 있는 자손 요소 전부를 선택한다.
.outer li
5. 자식 결합자
1촌 자식만 선택함
.outer > li
6. 자식 결합자 + 자손 결합자
자식의 자손들을 선택함
.outer > li li
7. 뒤따르는 모든 동생들을 선택
.starter ~ li
8. 뒤따르는 바로 다음 동생을 선택 (바로 뒤에 동생 한 명)
.starter + li
9. 첫번째 요소 가상 클래스
ol li:first-child
10. 마지막 요소 가상 클래스
ol li:last-child
11. ~가 아닌 요소 가상 클래스
.outer > li:not(:last-child)
→ outer의 li 중 마지막 요소를 제외한 나머지 모두
12. ~ 번째 요소 가상 클래스
ol li:nth-child(3) // :nth-child(#)
-> ol 태그의 li 태그 중 세 번째 요소
ol li:nth-child(2n) // :nth-child(#n)
-> ol 태그의 li 태그 중 2의 배수 번째 요소를 모두 선택
ol li:nth-child(3n+1) // :nth-child(#n+1)
→ ol 태그의 li 태그 중 3n+1 번째 요소를 모두 선택
nth-child(odd), nth-child(even)
→ 짝수, 홀수 번째 요소를 모두 선택
