css 정의부에서 클래스들을 나열한 것 질문 드립니다.
본문
안녕하세요^^
2차 메뉴 위치를 다른 곳으로 옮기려고 하는데
해당 css부분이 아래이더군요
.gnb_1dli_over .gnb_2dul, .gnb_1dli_over2 .gnb_2dul {display:block;top:29px;left:0px;width:130px;background:#fff}
질문
위에서 클래스명들이 스페이스를 사이에 두고 모두 나열되어있는데요
즉 아래처럼 되어있는데
클래스명1 (한칸건너뜀) 클래스명2(한칸 건너뜀)클래스명3 {상세정의내용;}
위처럼 클래스명 여러개 사이에 (한칸 건너뜀) 이 있으면
각기 따로 흩어져 있는 모든 클래스명을 한꺼번에 지칭하는 거에요?
아니면
모든 클래스가 모두 지정된 한 곳을 말하는 거에요?
감사합니다^^
답변 4
띄어쓰기를 하면 자손선택자가 되어서 해당 엘리먼트가 속해있는 경로를 표현하는 식이 됩니다.
.gnb_1dli_over .gnb_2dul, .gnb_1dli_over2 .gnb_2dul
이면 .gnb_1dli_over 안에 gnb_2dul 안에 gnb_1dli_over2 안에 gnb_2dul 을 선택하게 되죠.
자손선택자는 바로 직계자식일 필요는 없습니다. 다만 사이에 > 를 넣어서 자식선택자가 되게되면 바로 아랫단계의 자식을 의미하게 되므로 유의할 필요가 있습니다.
정말 감사합니다^^
.gnb_1dli_over .gnb_2dul
객체의 순서입니다. gnb_1dli_over 이 클레스 하위에 gnb_2dul 이것이 존재하는 것입니다.
선택자라고 검색해서 공부해보세요..
혹시 이걸 염두에 두고 질문하신 건가요?
.aaa .bbb { ..... } => aaa 클래스의 자식 및 그 이하의 자손 등 모든 bbb 클래스에 적용
.aaa > .bbb { ..... } => aaa 클래스의 자식 영역 즉 바로 한단계 아래의 bbb 클래스에만 적용
css selector를 검색해서 보새면 명쾌하실겁니다.