인프런 커뮤니티 질문&답변
작성한 질문수
인접선택자 선택할때요
작성
·
176
1
ㄱ++
<body>
<div class="container">
<input type="checkbox" id="trigger">
<label for="trigger">
<span></span>
<span></span>
<span></span>
</label>
</div>
</body>강의 내용에선
input[id=trigger]:checked + label[for=trigger] span:nth-child(1) {
transform: rotate(45deg);
top: 50%;이렇게 하셨는데
label[for=trigger]:checked + span:nth-child(1) { transform: rotate(45deg); top: 50%;}
이렇게 하면 안되는 이유가 뭘까요..?
답변 2
0
0
:checked 가상 클래스는 label에 사용되는 것이 아니라 input에 사용되어야 합니다.
그래서 아래처럼 적어주셔야 작동합니다.
input[id=trigger]:checked + label[for=trigger] span:nth-child(1) { transform: rotate(45deg); top: 50%;}