답변 3개
.logo {} /* class="logo" 인 요소를 선택 */
.gnb .logo {} /* .gnb 안에 있는 모든 .logo (후손) */ .gnb > .logo {} /* .gnb 바로 아래에 있는 .logo (직계 자식) */ .gnb > div.logo {} /* .gnb 아래 div.logo */
.logo + .btn {} /* .logo 바로 뒤에 오는 형제 .btn */ .logo ~ .btn {} /* .logo 뒤에 오는 모든 형제 .btn */
div.logo {} /* div이면서 클래스가 logo */ .gnb.logo {} /* gnb와 logo 클래스를 둘 다 가진 요소 */ .gnb .logo.btn {} /* .gnb 내부의 .logo.btn */
[class="logo"] {} /* 정확히 class="logo" */ [class~="logo"] {} /* 공백 기준으로 logo 포함 */ [class^="logo"] {} /* logo로 시작 */ [class$="logo"] {} /* logo로 끝남 */ [class*="logo"] {} /* logo를 포함 */
.logo:hover {} /* 마우스를 올렸을 때 */ .logo:active {} /* 클릭하고 있을 때 */ .logo:focus {} /* 포커스 상태일 때 */ .logo:first-child {} /* 부모의 첫 자식 */ .logo:last-child {} /* 부모의 마지막 자식 */ .logo:nth-child(2) {} /* 두 번째 자식 */ .logo:not(.main) {} /* .main 클래스가 아닌 .logo */
이정도만 알아도 css 선택자 부분은 거의 다 대응 가능합니다.
댓글을 작성하려면 로그인이 필요합니다.
sinbi댓글을 작성하려면 로그인이 필요합니다.
네 차이가 있습니다.
윗에껀 class="gnb logo" 이렇게 둘다 있어야 하고
아래껀 gnb 자식 logo 클래스에 적용됩니다.
답변에 대한 댓글 2개
이걸 공부하시면 될 것 같습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
.gnb > .logo{...} 쓰는거랑은 또 다른건가요?