관계 선택자
부모-자식 관계를 활용해 특정 상태에서 다른 요소의 스타일을 변경할 수 있습니다.
형식
{트리거}-{의사클래스}-{관계}-{타겟}-{클래스}관계 키워드
| 키워드 | CSS 결합자 | 설명 |
|---|---|---|
child | > (직접 자식) | 트리거의 직접 자식 요소 |
children | (공백, 후손) | 트리거의 모든 후손 요소 |
next | + (인접 형제) | 트리거 바로 다음 형제 |
siblings | ~ (일반 형제) | 트리거 뒤의 모든 형제 |
사용 예시
<!-- card에 호버하면 자식 img에 object-fit: cover 적용 -->
<div class="card-hover-child-img-ofc">
<img src="..." />
</div>
<!-- → .card:hover > img { object-fit: cover } -->
<!-- card에 호버하면 모든 자손 p에 색상 변경 -->
<div class="card-hover-children-p-cFFFFFF">
<p>텍스트</p>
</div>
<!-- → .card:hover p { color: #FFFFFF } -->
<!-- input 포커스 시 다음 형제 span 표시 -->
<input class="input-focus-next-span-db" />
<span class="dn">에러 메시지</span>
<!-- → .input:focus + span { display: block } -->
<!-- checkbox 체크 시 모든 뒤 형제 표시 -->
<input type="checkbox" class="toggle-checked-siblings-div-db" />
<div class="dn">숨겨진 콘텐츠</div>
<!-- → .toggle:checked ~ div { display: block } -->참고: 관계 선택자는 의사 요소(::before, ::after)와도 조합할 수 있습니다.