문득 ,.. 어떤 요소에 hover 했을 때, 다른 요소에 효과를 적용해본 적이 있나..? 생각이 들었다. hover는 주구장창 많이 써봤는데.. 이 기회에 CSS 결합자에 대해서 알아보기로 했다!
ex)
<html>
<div class='parent'>parent
<div class='child'>child</div>
<div class='child'>child</div>
<div>
<div class='child'>child</div>
</div>
</div>
</html>✨ 자손 결합자
✔️ 첫번째 요소의 자손을 선택
✔️ 공백 사용
.parent:hover .child {
color: red
}- parent 클래스 안에 모든 child 클래스가 선택된다.
✨ 자식 결합자
✔️ 첫번째 요소의 바로 아래 자식을 선택
✔️ > 사용
.parent:hover > .child {
color: red
}- 바로 아래에 있는 두개 child만 선택된다.
✨ 일반 형제 결합자
✔️ 첫번째 요소의 뒤따르면서 같은 부모를 갖고 있는 두번째 요소를 선택
✔️ ~ 사용
<html>
<div class='brother'>brother</div>
<div class='sister'>sister</div>
</html>.brother:hover ~ .sister {
color: red
}- brother와 부모를 함께 공유하는 sister가 선택된다.
✨ 인접 형제 결합자
✔️ 첫번째 요소의 뒤에 있으면서 같은 부모를 갖고 있는 두번째 요소를 선택
✔️ + 사용
<html>
<div class='brother'>brother</div>
<div class='sister'>sister</div>
<div class='sister'>sister</div>
</html>.brother:hover + .sister {
color: red
}- brother 바로 뒤에 있는 sister만 선택된다.
<html>
<div class='brother'>brother</div>
<div class='other'>other</div>
<div class='sister'>sister</div>
</html>- 이 경우는, brother 바로 뒤에는 other가 있기 때문에 아무도 선택되지 않는다.
후롱트엥드 개발자