인접선택자에 대한 질문드립니다!
129
7 asked
확장선택자와 함께 가상클래스 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>Answer 2
0
input은 자식요소를 가질 수 없으므로 아래에 있는 요소를 선택할 경우 형제선택자(~)을 사용해야 합니다.
그리고 인접형제선택자는 아래에 있는 요소만 선택 가능합니다.
0
안녕하세요, 인프런 AI 인턴입니다. 황서영님!
인접 선택자와 확장 선택자에 대한 질문을 주셨네요. ~ 선택자는 일반 형제(선택자가 가리키는 요소가 같은 부모 요소 밑에서 순서에 따른 모든 형제 요소를 선택) 선택자로 불립니다. 이 선택자는 CSS에서 선택 범위를 넓히고, 형제 간의 모든 요소에 스타일을 적용할 수 있게 합니다.
여기서 input[id=tab1]:checked ~ .slide .slide-inner 식으로 사용하면, input 요소가 :checked 상태일 때 해당 input의 뒤에 위치한 모든 형제 .slide 요소의 내부에 있는 .slide-inner 요소에 CSS를 적용하게 됩니다. 하지만 ~를 사용하지 않으면 형제 관계가 아닌 자식 또는 기타 영역이 뒤따를 수 없다는 제한이 생깁니다.
관련 질문과 핵심적인 설명을 통해 더 많은 정보가 도움이 될 것 같습니다. 아래 유사한 질문들을 확인해 보시면 더욱 이해를 높여주실 수 있습니다:
- 형제 인접선택자에 관한 설명: 여기에서 형제와 인접 선택자에 대한 보다 심도 있는 설명과 이미지 리소스를 확인할 수 있습니다.
- 인접 선택자의 사용법 예시 및 동작 이해: 자세한 코드 예시와 함께 선택자의 사용에 대해 다룹니다.
위 URL들을 참고하시면 이해하는데 큰 도움이 될 것입니다. 추가 질문이 있으시면 언제든지 문의해주세요.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
class 값 한 번에 부여하는법
2
80
1
@media에서의 flex-direction: column으로 세로배치 관련 질문드립니다.
1
69
1
div#css-checker-widget의 해결방
1
60
2
input의 포커스되었을때 검정선이 사라지지 않아요
0
79
2
강의듣는법
1
73
1
아코디언 만들기 100%이하의 화면으로 보았을때
1
68
2
input checked 질문합니다.
0
76
1
Bracket Pair Colorizer - 비주얼 스튜디오
1
140
2
Part 1 영상 안나옵니다
1
88
1
제이쿼리 작동이 안됩니다
1
199
3
강의 내용 질문있습니다.
1
120
2
일정 부분만 주석하는 방법
1
211
2
폰트어썸
1
134
2
delay 적용 안됨
1
134
1
rotateY(360deg)가 적용이 안됩니다!
1
186
2
세로이동할때 height값
1
138
2
폰트어썸이 안되요..
1
485
2
화면 정중앙에 오게끔 할수있나요?
1
169
1
어코디언 네비게이션 중
1
124
1
라이브서버 문제
1
225
2
넷플릭스 어코디언 예제 질문
1
102
1
이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?
1
154
1
active 관련 질문
1
145
2
checked 가상클래스에서 transform 속성을 사용할 때 관련 질문입니다.
1
144
1