:is()

• :is() 선택자는 여러 선택자를 하나로 그룹화할 수 있게 해 준다.
• 코드 중복을 줄이고, 가독성을 향상시킨다.

:is(h1, h2, h3) {
	color: red;
}

h1, h2, h3 태그 모두에 색상을 빨간색으로 적용한다

:where()

• :is() 선택자와 유사하게 작동하지만, 특정성(specificity) 계산에서 0을 가진다.
• 스타일 충돌을 방지하고, 보다 유연한 스타일링을 가능하게 한다.

  ✅ 특정성(specificity) 계산에서 0을 가진다는 것은
  :where() 안에 있는 선택자들이 다른 선택자들보다 우선순위가 낮아지지 않도록 한다는 것을 의미한다.

:where(h1, h2, h3) {
	clolr: blue;
}

h1, h2, h3 태그 모두에 색상을 파란색으로 적용하되, 다른 선택자와 충돌하지 않도록 한다.

:not()

• 괄호 안에 지정된 선택자에 해당하지 않는 모든 요소를 선택한다.
• 특정 요소를 제외한 나머지 요소에 스타일 적용 가능케 함

:not(.example) {
	color: green;
}

class="example"이 아닌 모든 요소에 색상을 초록색으로 적용한다.

:has()

• css 선택자 레벨 4에 속한다.
• 모든 브라우저에서 지원이 불가할 수 있음 (사용 전에 브라우저 호환성 확인하기)
• 괄호 안의 선택자에 해당하는 자식 요소를 포함하는 부모 요소를 선택한다.
• 특정 요소가 특정 자식을 포함하고 있을 때 스타일을 적용하고 싶을 때 유용하다.

p:has(span) {
	color: purple;
}

span 요소를 자식으로 포함하는 모든 p 요소에 색상을 보라색으로 적용한다