[CSS] chaining(체이닝) 이란?

체이닝(Chaining)이란?

 

두 개 이상의 조건을 동시에 만족하는 요소를 선택하기 위해 여러 선택자를 "연결(체인)"하는 것

h2.destination { ... }

 

이건 다음 두 가지 조건을 모두 만족해야 해:

1. 태그가 <h2>여야 하고
   
   
2. 클래스가 "destination"이어야 해
   
   

👉 이렇게 두 조건이 동시에 만족될 때만 스타일이 적용돼.
그래서 이걸 **"선택자 체이닝"**이라고 부르는 거야!

💡 체이닝은 이런 것들:

선택자	설명
h1.title	<h1 class="title">인 경우만 선택
button.primary.large	클래스가 primary이면서 large인 <button>만 선택
a[href]	<a> 태그이면서 href 속성이 있는 경우만 선택
input[type="text"].active	type="text"이고 클래스가 active인 <input>만 선택

 

📘 체이닝 vs 조합 (헷갈릴 수 있어!)

• 체이닝 (공백 없이 연결) : 같은 요소가 두 조건을 동시에 만족해야 함
• 조합 (공백 있음) : div 안에 있는 p 태그 선택 (부모-자식 관계)

 

h2.destination { ... }   div p { ... }