인프런 커뮤니티 질문&답변
작성한 질문수
인접선택자에 대한 질문드립니다!
작성
·
21
1
확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 06(탭 콘텐츠 - Slide) 강의에서 인접선택자로 아래 코드와 같이 input 태그의 해당 id값을 체크 시 .slide의 자식인 .slide-inner에 left값을 변경해준다고 표시되어져있습니다.
여기에서 ~가 없으면 왜 코드가 제대로 작동되지 않는건가요? ~ 가 없으면 input부분에 해당하는 태그의 자식요소만 올 수 있다는 걸로 이해하는게 맞나요??
(아래 코드는 질문에 필요한 html과 css 부분만 올렸습니다)
(+ 항상 질문에 답변 달아주셔서 감사합니다!ㅎㅎ)
input[id=tab1]:checked ~ .slide .slide-inner {
left: 0;
}
input[id=tab2]:checked ~ .slide .slide-inner {
left: -300px;
}
input[id=tab3]:checked ~ .slide .slide-inner {
left: -600px;
}
/*----------------------------------------*/
<body>
<div class="tab-inner">
<input type="radio" name="tabmenu" id="tab1" checked>
<input type="radio" name="tabmenu" id="tab2">
<input type="radio" name="tabmenu" id="tab3">
<div class="slide">
<div class="slide-inner">
<a href="#none1"><img src="images/slide-01.jpg"></a>
<a href="#none2"><img src="images/slide-02.jpg"></a>
<a href="#none3"><img src="images/slide-03.jpg"></a>
</div>
</div>
<div class="btn">
<label for="tab1"></label>
<label for="tab2"></label>
<label for="tab3"></label>
</div>
</div>
</body>답변 2
0
input은 자식요소를 가질 수 없으므로 아래에 있는 요소를 선택할 경우 형제선택자(~)을 사용해야 합니다.
그리고 인접형제선택자는 아래에 있는 요소만 선택 가능합니다.
0
안녕하세요, 인프런 AI 인턴입니다. 황서영님!
인접 선택자와 확장 선택자에 대한 질문을 주셨네요. ~ 선택자는 일반 형제(선택자가 가리키는 요소가 같은 부모 요소 밑에서 순서에 따른 모든 형제 요소를 선택) 선택자로 불립니다. 이 선택자는 CSS에서 선택 범위를 넓히고, 형제 간의 모든 요소에 스타일을 적용할 수 있게 합니다.
여기서 input[id=tab1]:checked ~ .slide .slide-inner 식으로 사용하면, input 요소가 :checked 상태일 때 해당 input의 뒤에 위치한 모든 형제 .slide 요소의 내부에 있는 .slide-inner 요소에 CSS를 적용하게 됩니다. 하지만 ~를 사용하지 않으면 형제 관계가 아닌 자식 또는 기타 영역이 뒤따를 수 없다는 제한이 생깁니다.
관련 질문과 핵심적인 설명을 통해 더 많은 정보가 도움이 될 것 같습니다. 아래 유사한 질문들을 확인해 보시면 더욱 이해를 높여주실 수 있습니다:
- 형제 인접선택자에 관한 설명: 여기에서 형제와 인접 선택자에 대한 보다 심도 있는 설명과 이미지 리소스를 확인할 수 있습니다.
- 인접 선택자의 사용법 예시 및 동작 이해: 자세한 코드 예시와 함께 선택자의 사용에 대해 다룹니다.
위 URL들을 참고하시면 이해하는데 큰 도움이 될 것입니다. 추가 질문이 있으시면 언제든지 문의해주세요.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.