• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

인접선택자 선택할때요

22.11.03 13:51 작성 조회수 116

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

나유진님의 프로필

나유진

2023.01.12

+가 인접선택자니까 바로 아래인 label만 적용되니 span은 적용 안되는걸로 배웠습니다

:checked 가상 클래스는 label에 사용되는 것이 아니라 input에 사용되어야 합니다.
그래서 아래처럼 적어주셔야 작동합니다.

input[id=trigger]:checked + label[for=trigger] span:nth-child(1) { transform: rotate(45deg); top: 50%;}

0

input을 누르는거나 label을 누르는건 동일하게 작동합니다.

html, css 전체코드를 올려주세요.