💾 CSS :not()과 :has()의 조합

1. :not() 의사 클래스 (Negation Pseudo-class)

• :not()은 특정 조건을 만족하지 않는 요소를 선택함.
• 괄호 안에 선택자를 넣어 해당 선택자에 해당하지 않는 요소에만 스타일 적용함.

선택자:not(제외할_선택자) {
  /* 스타일 */
}

 

 

제외할 선택자에 들어갈 수 있는 것:

• 단순 선택자 (Simple Selector):
  • 타입 선택자 (Type Selector): div, p, span, a 등 HTML 태그 이름
  • 클래스 선택자 (Class Selector): .my-class
  • ID 선택자 (ID Selector): #my-id
  • 전체 선택자 (Universal Selector): *
  • 속성 선택자 (Attribute Selector): [type="text"], [data-value] 등
  • 일부 의사 클래스 (Pseudo-class): :first-child, :last-child, :nth-child(), :checked, :enabled, :disabled 등 (단, :not() 자신은 중첩 불가)

제외할 선택자에 들어갈 수 없는 것:

• 복합 선택자 (Combinator): > (자식), + (인접 형제), ~ (일반 형제), 공백 (하위)
• 의사 요소 (Pseudo-element): ::before, ::after, ::first-line 등
• :not() 자신: :not(:not(...))과 같이 중첩해서 사용할 수 없음
• :has(): 사용할 수 없음.

 

/* <p> 요소 중 class가 "special"이 *아닌* 요소에 스타일 적용 */
p:not(.special) {
  color: blue;
}

/* type이 "submit"이 *아닌* <input> 요소에 스타일 적용 */
input:not([type="submit"]) {
  border: 1px solid gray;
}

/* 첫 번째 자식 요소가 *아닌* <li> 요소에 스타일 적용 */
li:not(:first-child) {
  margin-left: 10px;
}

/* <a> 요소 중 hover 상태가 *아닌* 요소에 스타일 적용*/
a:not(:hover){
    text-decoration: none;
}

 

2. :has() 의사 클래스

• :has()는 특정 조건을 만족하는 요소를 포함하는 부모 요소를 선택함.
• 괄호 안에 선택자를 넣어, 해당 선택자에 해당하는 자식 또는 하위 요소를 하나 이상 가지는 부모 요소에 스타일을 적용함.

선택자:has(포함_여부를_검사할_선택자) {
  /* 스타일 */
}

 

포함 여부를 검사할 선택자에 들어갈 수 있는 것:

• :has() 안에는 거의 모든 종류의 선택자를 사용할 수 있음.
• 단순 선택자뿐만 아니라 복합 선택자, 의사 클래스, 심지어 다른 :has()까지도 (중첩해서) 사용할 수 있음.

/* <img> 요소를 *하나 이상 포함하는* <figure> 요소에 스타일 적용 */
figure:has(img) {
  border: 1px solid red;
}

/* class가 "active"인 <li> 요소를 *하나 이상 포함하는* <ul> 요소에 스타일 적용 */
ul:has(li.active) {
  background-color: lightyellow;
}

/* <input type="checkbox"> 요소가 체크된(:checked) 상태인 <label> 요소에 스타일 적용.
   (label 안에 input 이 있는 경우) */
label:has(input[type="checkbox"]:checked) {
    font-weight: bold;
}

/* <a>요소 바로 뒤에 <p>요소가 오는 경우, a에 스타일 적용 */
a:has(+ p){
    color: red;
}

 

3. :not()과 :has() 조합

• 선택자:not(:has(자식선택자)): 선택자에 해당하는 요소 중, 자식 선택자에 해당하는 자식/하위 요소를 가지지 않는 요소를 선택.
• 선택자:has(:not(자식선택자)): 선택자에 해당하는 요소 중, 자식 선택자에 해당하지 않는 자식/하위요소를 하나라도 가지는 요소

.re-container:not(:has(#b1:hover, #b2:hover, #b3:hover)) #c1 {
    display: block;
}

 

 

1. #b1:hover, #b2:hover, #b3:hover: #b1, #b2, #b3 중 어느 하나라도 hover 상태인 요소를 찾음.
2. :has(#b1:hover, #b2:hover, #b3:hover): 1번에서 찾은 요소를 하나 이상 포함하는 요소를 찾음. (re-container)
3. .re-container:not(...): .re-container 요소 중, 2번의 조건에 해당하지 않는 요소를 선택함.
   1. #b1, #b2, #b3 중 어느 것도 hover 상태가 아닌 경우의 .re-container를 선택.
4. ... #c1: 3번에서 선택된 .re-container의 하위 요소 중 #c1을 선택함.
5. display:block: 선택된 #c1을 보이게 함.

어떤 버튼도 hover되지 않은 초기 상태에서만 #c1이 보이게 됨.

 

:not()과 :has()를 조합하면 "A를 포함하지 않으면서 B를 포함하는 요소" 와 같은 복잡한 조건을 표현할 수 있음.