.menu-btn:checked ~ => :checked ~ 이 무엇을 의미하는 지요?
본문
질문 1 :: .menu-btn:checked ~ => :checked ~ 이 무엇을 의미하는 지요?
질문 2 :: ~ 의 의미는 또 무엇이죠?
질문 3 :: .menu-icon:not(.steps) 이 것은 무엇을 의미하나요?
=============================================================
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
답변 3
checked는 말그대로 인풋테그 중 라디오나 체크박스에서 체크된 것을 말하는것입니다
~는 해당 선택자의 형제노드를 말하는것
not(.steps)은 menu-icon중 steps 클래스가 아닌 것을 이야기 합니다.
예를 들어
.header .menu-btn:checked ~ .menu-icon .navicon 은
menu-btn이 체크되면 형제노드의 menu-icon .navicon의 css를 변화시키는 형태입니다
관련 내용은 css의 선택자를 검색해보시면 잘 알 수 있습니다.
~ 대상의 자식, 하위 엘리먼트
애드프로 님, 볼피드 님,
답변 감사합니다.
