CSS / 2026 모던 CSS 2026.06.02

Part 4: 최신 강력 선택자 (:is, :where, :has, :not)

Part 3에서 CSS 네스팅을 배웠습니다. 이번 파트에서는 네스팅과 함께 사용하면 훨씬 더 강력해지는 최신 선택자들을 알아보겠습니다. 특히 :has()는 오랫동안 개발자들이 기다려온 “부모 선택자” 기능을 제공하기 때문에 실무에서 매우 유용하게 사용되고 있습니다.

이 선택자들은 단순히 코드를 짧게 쓰는 용도가 아니라, CSS를 더 선언적이고 읽기 쉽게 만들어주는 중요한 도구들입니다. 하나씩 자세히 살펴보겠습니다.

1. :is() 선택자

제휴 광고 · 일부 링크는 수수료를 받을 수 있습니다

[모양톡+젤리 토이프렌즈]

₩9,900

₩19,800

마리오케이스

22살에 과일 판매로 매출 1000만원 달성한 노하우

₩159,000

크몽

해운대 블루라인파크 스카이캡슐 / 해변열차 탑승권

₩8,000

KKday

:is()는 여러 선택자를 하나로 묶을 때 사용합니다. 가독성을 높이고 반복되는 코드를 줄여주는 역할을 합니다.

/* 기존 방식 */
.card h2,
.card h3,
.card h4 {
  color: #111827;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

/* :is() 사용 */
.card :is(h2, h3, h4) {
  color: #111827;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

:is()는 내부에 있는 선택자 중 **가장 높은 특정도**를 가집니다. 예를 들어 :is(.card, #header)는 ID 선택자 때문에 100점으로 계산됩니다.

2. :where() 선택자

:where()는 :is()와 거의 비슷하게 동작하지만, **특정도가 0**으로 계산된다는 큰 차이점이 있습니다.

/* 특정도가 낮아서 나중에 쉽게 덮어쓸 수 있음 */
:where(.card, .modal, .sidebar) .title {
  font-size: 1.25rem;
  font-weight: 600;
}

실무에서는 :where()를 더 자주 추천합니다. 특정도가 낮기 때문에 나중에 컴포넌트 스타일을 수정하거나 예외 처리를 할 때 충돌이 적기 때문입니다.

3. :has() 선택자 — 부모를 선택하는 혁명

제휴 광고 · 일부 링크는 수수료를 받을 수 있습니다

화물차리스 전문 화물박사 - 1톤트럭, 특장차 즉시출고

화물차 리스 전문 화물박사

:has()는 CSS 역사상 가장 강력한 선택자 중 하나로 평가받습니다. 자식 요소의 상태나 존재 여부에 따라 부모 요소의 스타일을 변경할 수 있게 해줍니다.

/* 카드 안에 이미지가 있으면 스타일 변경 */
.card:has(img) {
  padding: 0;
  overflow: hidden;
}

/* 입력 필드에 값이 입력되면 라벨 스타일 변경 */
.input-group:has(input:not(:placeholder-shown)) label {
  color: #0a66c2;
  transform: translateY(-1.5rem) scale(0.85);
}

/* 체크박스가 체크되면 형제 요소 스타일 변경 */
input[type="checkbox"]:checked + .label-text {
  text-decoration: line-through;
  color: #9ca3af;
}

:has()를 사용하면 이전에는 JavaScript로 처리해야 했던 많은 UI 상태를 CSS만으로 구현할 수 있게 됩니다.

4. :not() 선택자

:not()는 특정 조건을 제외하고 선택할 때 사용합니다.

/* disabled가 아닌 버튼만 스타일 적용 */
button:not(:disabled) {
  background: #0a66c2;
  color: white;
  cursor: pointer;
}

/* 첫 번째와 마지막 요소 제외 */
li:not(:first-child):not(:last-child) {
  border-bottom: 1px solid #e5e7eb;
}

5. 실전에서 자주 쓰이는 조합 패턴

/* 카드 안에 이미지가 있고 호버했을 때만 효과 주기 */
.card:has(img):hover {
  box-shadow: 0 20px 25px rgb(0 0 0 / 0.15);
}

/* 특정 클래스가 없는 경우에만 스타일 적용 */
.card:not(.compact) .content {
  padding: 24px;
}

/* 자식 요소가 특정 상태일 때 부모 스타일 변경 */
.form-group:has(input:focus) {
  border-color: #0a66c2;
}