HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
💌
JJong’s Archive
/
CSS 선택자 - 결합자

CSS 선택자 - 결합자

Tags
CSS
Study Date
Dec 14, 2023
Status
Done
생성 일시
Dec 14, 2023 04:59 AM
Day
 
  • 자손 결합자 ( ) ⇒ A B
    • A의 자손인 B 노드를 선택 (자식 포함)
    • 예제:div span은 <div>  요소 안에 위치하는 모든 <span> 요소
 
  • 자식 결합자 (>) ⇒ A > B
    • A의 바로 아래 자식인 B노드를 선택
    • 예제: ul > li는 <ul> 요소 바로 아래에 위치하는 모든 <li> 요소
 
  • 일반 형제 결합자 (~) ⇒ A ~ B
    • A 뒤에 오는 모든 형제 B(같은 부모를 공유)
    • 예제: p ~ span은 <p> 요소를 뒤따르는 모든 <span> 요소와 일치
 
  • 인접 형제 결합자 (+) ⇒ A + B
    • A 뒤에 오는 첫 형제 B(같은 부모를 공유)
    • 예제: h2 + p는 <h2> 바로 뒤에 위치하는 <p> 요소와 일치
 
  • 열 결합자 (en-US) Experimental (||) ⇒ A || B
    • 같은 열에 속하는 노드
    • 예제: col || td는 <col> (en-US)의 범위에 속하는 모든 <td> (en-US) 요소와 일치합니다.