논리 가상 클래스 선택자 :where() / :is() / :has() / :not()

한 선택자를 간결하게 줄여주고, 이전에는 자바스크립트 없이는 불가능했던 레이아웃 제어를 가능하게 해줍니다.

---

1. :is()와 :where() (중복 줄이기)

여러 요소를 한 번에 선택할 때 코드를 획기적으로 줄여줍니다.

• 기능: header p, footer p, section p처럼 반복되는 선택자를 하나로 묶습니다.
• 차이점 (우선순위 점수):
  • :is(): 괄호 안에 있는 선택자 중 가장 점수가 높은 것의 우선순위를 따릅니다.
  • :where(): 우선순위 점수가 항상 0점입니다. 기존 스타일을 덮어쓰기 쉬워 기본 스타일(Reset)을 잡을 때 유리합니다.

CSS

 

/* 기존 방식 */
header button:hover, footer button:hover, aside button:hover { color: blue; }

/* :is() 활용 */
:is(header, footer, aside) button:hover { color: blue; }

---

2. :not() (부정 선택자)

"이것만 제외하고"라는 조건을 걸 때 사용합니다.

• 기능: 괄호 안의 선택자와 일치하지 않는 모든 요소를 선택합니다.
• 활용 예시: 마지막 리스트 아이템에만 테두리를 빼고 싶을 때 유용합니다.

CSS

 

/* 마지막 li를 제외한 모든 li에 밑줄 추가 */
.table-body li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

---

3. :has() (부모 선택자 - CSS의 혁명)

그동안 CSS는 '부모가 자식을 선택'할 수는 있었지만, '자식의 상태에 따라 부모를 선택'할 수는 없었습니다. 이를 해결해 준 것이 바로 :has()입니다.

• 기능: 특정 자식 요소를 포함하고 있는 부모 요소를 선택합니다.
• 활용 예시: "체크박스가 체크된 상태인 li의 배경색을 바꿔라" 같은 처리가 가능합니다.

CSS

 

/* 이미지(img)를 포함하고 있는 figure 요소에만 테두리 추가 */
figure:has(img) {
    border: 1px solid #ccc;
}

/* 체크박스가 선택된(.checked) 상태인 행(li)의 배경색 변경 */
li:has(input:checked) {
    background-color: #eff6ff;
}

---

💡 한 눈에 비교하는 요약표

선택자	핵심 개념	주요 용도
:is()	"또는(OR)" + 높은 점수	긴 선택자 그룹화, 코드 간결화
:where()	"또는(OR)" + 0점	프레임워크나 라이브러리의 기본 스타일 정의
:not()	"제외(Except)"	특정 요소만 스타일에서 배제할 때
:has()	"포함(Contains)"	자식의 유무나 상태에 따른 부모 스타일 제어

---

🛠️ 실무 적용 예시 (게시판 코드 개선)

우리가 만들었던 게시판 코드에 이 선택자들을 적용하면 훨씬 세련되게 관리할 수 있습니다.

CSS

 

/* 1. 공지(notice)와 중요(star) 글만 굵게 표시 */
.table-body li:is(.notice, .star) { font-weight: bold; }

/* 2. 링크가 없는 행만 마우스 커서를 기본으로 변경 */
.table-body li:not(:has(a)) { cursor: default; }

/* 3. 체크박스가 선택된 행 전체의 디자인 변경 (자바스크립트 없이 가능!) */
.table-body li:has(input[type="checkbox"]:checked) {
    background-color: #f1f5f9;
    outline: 2px solid #2563eb;
}

이 선택자들은 현재 모든 최신 브라우저(Chrome, Safari, Edge, Firefox 등)에서 지원되므로 안심하고 사용하셔도 됩니다.

 

 

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.