CSS 선택자 해석 팁

CSS 선택자는 앞에서부터 읽어나가는 게 아니라 뒤부터 읽어나가는 게 좀 더 직관적이고 알아먹기 편하다.

 

input:focus, a:active 처럼 짧다면 문제가 없지만

 

.fruits span:first-child 같이 하위 선택자도 선택하게 된다면 선택자를 오해할 수 있다.

 

위의 선택자는 .fruits 선택자의 하위 선택자 span을 만족하는 요소가 형제 요소 중 첫째라면 선택하고, 아니라면 선택하지 않는 선택자이지만 앞에서부터 읽어 나간다면 .fruits 선택자의 하위 선택자 span 요소 중 첫째를 선택하는, span 요소 중에 형제 요소 중 첫째인 선택자가 없더라도 span 요소의 첫째를 선택하는 선택자라고 오해할 수 있다.

 

뒤에서부터 읽는다면 형제 요소들 중 첫번째 요소를 고르는데 조건이 .fruits의 자식요소인 span이어야한다고 읽자마자 정확히 알 수 있다.