CSS에서 선택자 배제는 특정 요소를 제외하거나 스타일을 적용하지 않도록 하는 방법을 말합니다. 선택자 배제를 사용하면 웹 페이지의 특정 부분에 스타일을 적용하거나 제외할 수 있습니다.

1. 요소 배제

특정 요소를 제외하고 싶을 때 :not() 선택자를 사용합니다. 예를 들어, 모든 <p> 요소에 스타일을 적용하되 클래스가 “exclude”인 요소는 배제하고 싶을 경우 다음과 같이 작성할 수 있습니다:

p:not(.exclude) {
  /* 스타일 적용 */
}

2. 그룹 배제

여러 요소 중 특정 요소들을 제외하고 싶을 때는 :not() 선택자를 사용하여 그룹을 배제할 수 있습니다. 예를 들어, 모든 <li> 요소에 스타일을 적용하되 클래스가 “exclude” 또는 “special”인 요소들은 배제하고 싶을 경우 다음과 같이 작성할 수 있습니다:

li:not(.exclude):not(.special) {
  /* 스타일 적용 */
}

3. 자식 요소 배제

특정 요소의 자식 요소 중 일부를 제외하고 싶을 때 :not() 선택자를 사용하여 자식 요소를 배제할 수 있습니다. 예를 들어, <ul>의 자식 <li>들 중에서 클래스가 “exclude”인 요소들을 배제하고 싶을 경우 다음과 같이 작성할 수 있습니다:

ul > li:not(.exclude) {
  /* 스타일 적용 */
}

결론

CSS 선택자 배제를 사용하여 특정 요소들을 선택하거나 배제하면서 웹 페이지의 스타일을 효과적으로 제어할 수 있습니다. 다양한 선택자를 조합하여 필요에 맞는 스타일을 적용하고 배제할 수 있습니다.

문서 출처: MDN Web Docs