그렇다. 난 css를 뜯고 고치고 해야 하는 사람이니 css 선택자부터 정리해 보겠다.
왜냐면. 맨날 헷갈리니까 ㅎ
1. 일치 선택자
#id
#은 id / . 은 class ( 다 아는 사실.)
아이디가 id로 돼있는 요소를 선택한다. 내가 제일 많이 남용했던 선택자이다..
왜냐하면 main > .div > a > img > .main_wrap 이렇게 안 하고 그냥 .main_wrap만 쳐도 됐으니까.....
(사람들이 왜 이렇게 안쓰겠냐 멍청한 놈아!)
2. 자식 선택자
#id > .class
id 자식 요소 class를 선택한다.
3. 자손 선택자
#id .class
id의 자손 요소 class를 선택한다.
2개가 다른 점을 알아야 한다.
자식 선택자는 지 자식들만 취급한다. (첫째, 둘째, 셋쨰, 막내 calss까지)
자손 선택자는 지 자식들, 지 손녀 손자들, 그 이후 후계들 (큼)까지 다 선택한다. (첫째와 첫째 자식의 이름이 calss인 것도 포함, 둘째와 둘째 자식들도 똑같이)
4. 인접 형제 선택자
.class + ul
class의 바로 다음 형제 요소인 ul을 선택한다. (바로 다음 형제 하나만!)
5. 일반 형제 선택자
.class ~ ul
class의 형제 요소인 ul을 모두 선택한다. (calss의 형제 ul을 다 선택한다.)
이렇게 보는것보다.
한번 해보는 게 편하다. .class + ul 하면 .class의 형제 하나만 선택한다 했다. 그럼 뭐가 선택되냐 .class가 2개니까 둘째 자식 ul과 넷째 자식 ul이 선택된다.
그럼 .class~ul은? .class의 모든 ul 형제들을 선택하니 다섯째 자식 ul도 선택돼야 한다.
그렇다. ! 더 헷갈린다면 죄송하다..! 왜 이따구지..? ㅜ ㅜ 이게 최선인가..
+ 내가 헷갈렸던 거
만약 이렇게 있고 내가
이렇게 선택한다면 .div의 자식 .div_div중 첫 번째 자식이니까 span만 선택되겠지?! (근데 이것도 아니다 첫번째 자식이 .div_div면이다.)
아니다. .div_div의 첫 번째 자식이 아니라 첫번째 .div_div였다. 맨날 헷갈린다.
+ first-child와 first-of-type
이 상태에서 .div_div > p:first-child 하면 p가 선택될 것만 같지 않은가..? 첫 번째 p잖아..
아니야. 첫 번째 요소와 타입이 일치해야 한다.그러니까 .div_div의 자식중에 첫번째 자식은 span이라 타입이 일치하지 않아서 선택이 안된다. 그럼 p는 어떻게 선택하냐
.div_div > p:first-of-type 이렇게 선택해야한다. .div_div의 자식들 중에 첫 번째 p를 선택한다. 어렵네.. 헷갈려..