[CSS3] not & has

---

알고있으면 좋은 CSS3 Tip✨

---

가상 클래스(not, has)란 무엇인가?

• :not은 특정 요소가 없는 태그를 선택한다.
• :has는 특정 요소를 가진 태그를 선택한다.

 

(1) :not

  <style>
    /* 모든 <p> 요소에 적용 */
    p {color: red;}
    
    /* :not()을 사용하여 class가 "highlight"를 제외한 나머지 요소에 적용 */
    p:not(.highlight) {background-color: blue;}
    
    /* class가 "highlight"인 요소에 적용 */
    p.highlight {background-color: yellow;}
  </style>
  
  <p>일반적인 <p> 요소입니다.</p>
  <p class="highlight">이 <p> 요소는 하이라이트입니다.</p>
  <p>또 다른 일반적인 <p> 요소입니다.</p>

• 괄호 안의 매개변수 요소를 제외한 모든 요소의 스타일을 지정하는 데 사용한다.
• :not()을 사용하면 선택자를 보다 구체적으로 지정할 수 있어, 특정 요소를 제외하고 스타일을 적용하는 데 유용하다.

 

(2) :has

  <style>
    /* .card 클래스가 포함된 부모 요소가 .highlight 클래스를 자식으로 가지고 있다면 적용 */
    .card:has(.highlight) {background-color: yellow;}

    /* 일반 .card 요소에 적용 */
    .card {background-color: lightgray; padding: 20px; margin: 10px;}

    /* .highlight 클래스가 있다면 적용 */
    .highlight {color: red; font-weight: bold;}
  </style>
  
  <div class="card"><p>일반 카드</p></div>
  <div class="card"><p class="highlight">하이라이트된 카드</p></div>
  <div class="card"><p>일반 카드 2</p></div>

• 자식 요소의 조건에 따라 부모 요소의 스타일을 동적으로 변경할 수 있다.
• 자식 요소에 특정 클래스가 있을 때 부모 요소에 스타일을 적용하거나, 특정 자식 요소가 포함된 부모만 다른 스타일을 주는 방식으로 유용하게 사용할 수 있다.
• 현재 최신 버전의 Chrome, Edge, Safari에서 지원되지만, Firefox는 아직 지원하지 않는다.

 

(3) :not & :has 같이 사용하기

/* .price_info라는 클래스를 가진 자식 요소가 없는 부모 요소를 선택한다. */
.markerRound_detail_round3.bubbleType2:not(:has(.price_info)) .price_title {border-radius:0 5px 5px 5px;}

• markerRound_detail_round3와 bubbleType2 클래스를 모두 가지며, 자식 요소로 price_info 클래스를 가지고 있지 않은 요소에서 그 안에 있는 price_title 클래스의 요소에 대해 border-radius를 0 5px 5px 5px로 설정한다.