:has() 선택자: CSS에 실제 로직을 도입

Source: Dev.to

“If” logic in CSS — yes, it’s real.

우리는 모두 이렇게 말해왔습니다:

“CSS는 논리를 처리할 수 없다.”

하지만… 그 말은 사실이 아닙니다.

:has() 를 사용하면 CSS가 if 조건처럼 동작하여, 요소가 포함하고 있는 내용이나 내부에서 일어나는 일에 따라 스타일을 적용할 수 있습니다.

/* If a card has an image, add a border */
.card:has(img) {
  border: 2px solid #4f46e5;
}

쉽게 말해, .card 안에 img 가 있으면 해당 스타일을 적용한다는 뜻입니다.

Why this matters

• UI 상태를 관리하는 JavaScript 양 감소
• 더 반응적이고 지능적인 레이아웃
• 더 깔끔하고 단순한 컴포넌트 로직