반응형
CSS 선택자는 앞에서부터 읽어나가는 게 아니라 뒤부터 읽어나가는 게 좀 더 직관적이고 알아먹기 편하다.
input:focus, a:active 처럼 짧다면 문제가 없지만
.fruits span:first-child 같이 하위 선택자도 선택하게 된다면 선택자를 오해할 수 있다.
위의 선택자는 .fruits 선택자의 하위 선택자 span을 만족하는 요소가 형제 요소 중 첫째라면 선택하고, 아니라면 선택하지 않는 선택자이지만 앞에서부터 읽어 나간다면 .fruits 선택자의 하위 선택자 span 요소 중 첫째를 선택하는, span 요소 중에 형제 요소 중 첫째인 선택자가 없더라도 span 요소의 첫째를 선택하는 선택자라고 오해할 수 있다.
뒤에서부터 읽는다면 형제 요소들 중 첫번째 요소를 고르는데 조건이 .fruits의 자식요소인 span이어야한다고 읽자마자 정확히 알 수 있다.
반응형
'프로그래밍 > CSS 공부' 카테고리의 다른 글
| 선택자_가상 클래스2 (0) | 2023.01.23 |
|---|---|
| 선택자_가상 클래스(의사 클래스) (0) | 2023.01.23 |
| CSS 선택자_복합 (0) | 2023.01.20 |
| CSS 선택자_기본 (0) | 2023.01.20 |
| CSS 선언 방식 4가지 (0) | 2023.01.20 |