콤비네이터(combinator)

1. 콤비네이터(Combinator)

우리말로 결합자 라고 하는데, 콤비네이터는 셀렉터와 셀렉터 사이에 추가하여 새로운 선택을 만들어내는 연산자이다.

이를 통해 좀 더 복잡하고 효율적인 선택이 가능하다. 브라우저는 요소를 선택할 때, 셀렉터의 가장 오른쪽부터 시작하여 왼쪽으로 이동하여 조건을 확인한다. 이는 성능 최적화를 위함인데, 불필요한 요소 검사를 줄일 수 있다.

 

1-1. 주요 콤비네이터 유형

1. 하위 콤비네이터 (Descendant Combinator)
   • 기호: (공백)
   • 예: div p
   • 설명: 모든 p 요소를 찾은 후, 그 중 div 하위에 있는 요소를 선택
2. 자식 콤비네이터 (Child Combinator)
   • 기호: >
   • 예: `ul > li
   • 설명: 모든 li 요소를 찾은 후, 그 중 직계 부모가 ul인 요소를 선택
3. 인접 형제 콤비네이터 (Adjacent Sibling Combinator)
   • 기호: +
   • 예: h1 + p
   • 설명: 모든 p 요소를 찾은 후, 그 중 바로 이전 형제 요소가 h1인 것을 선택
4. 일반 형제 콤비네이터 (General Sibling Combinator)
   • 기호: ~
   • 예: h1 ~ p
   • 설명: 모든 p 요소를 찾은 후, 그 중 앞에 h1 형제가 있는 것들을 모두 선택

주의사항.

복잡한 콤비네이터 사용은 성능에 영향을 줄 수 있다. 간단하게 유지

콤비네이터 자체는 셀렉터 특정성 점수에 영향을 주지 않지만, 많이 사용한다면 많은 셀렉터가 활용 되므로, 셀렉터 특정성 점수가 높아진다.