[가상 클래스] not:() 을 사용해보자

부정(negation) 가상 클래스로 :not(X)는 인수로 간단한 선택자(selector) X를 취하는 표기법 입니다.

인수로 표시되지 않은 요소와 일치 합니다. 

쉽게 말해서 div a 요소 중 .selctor 클래스가 들어간 요소만 제외한 나머지 a 요소에 일정한 스타일을 주고 싶을 때 사용한다.

 

예제

// 구문
:not(selector) {
  style properties
}

// 클래스 classy 를 제외한 모든 p 엘리먼트 요소 텍스트에 color 값을 red 로 선택
p:not(.classy) {
  color: red;
}

// body 자식 중 p 엘리먼트 요소가 아닌 엘리먼트들 color 값을 green 으로 설정 
body :not(p) {
  color: green;
}

developer.mozilla.org/ko/docs/Web/CSS/:not

 

 

예시 

이따금씩 Header Wapper 영역에서 좌측에는 로고, 우측에는 네비게이션으로 나눠지는 경우를 종종 볼 수 있다.

우측 네비게이션에서 일정한 margin 여백 값을 주고자 하는데, 좌측 로고 영역까지 margin 값이 동일하게 먹는 경우가 종종 발생한다.

<nav class="global-nav">
  <div class="global-nav-links">
    <a href="#" class="global-nav-item">Rooms</a>
    <a href="#" class="global-nav-item">Ideas</a>
    <a href="#" class="global-nav-item">Stores</a>
    <a href="#" class="global-nav-item">Contact</a>
  </div>
</nav>
<nav class="local-nav">
  <div class="local-nav-links">
    <a href="#" class="product-name">AirMug Pro</a>
    <a href="#">개요</a>
    <a href="#">제품사양</a>
    <a href="#">구입하기</a>
  </div>
</nav>

이런 경우 not:(selector) 선택자를 사용하여 .product-name 만 제외한 .local-nav-links a 요소에 일정한 margin-left 값을 줄 수 있다. 

.global-nav-links, 
.local-nav-links {
    display: flex;
    align-items: center;
    max-width: 1000px;
    height: 100%;
    margin: 0 auto;
}

.global-nav-links {
    justify-content: space-between;
}

.local-nav-links a {
    font-size: 0.8rem;
}

.local-nav-links a:not(.product-name) {
    margin-left: 2em;
}

.local-nav-links .product-name {
    margin-right: auto;
    font-weight: bold;
    font-size: 1.4rem;
}

 

그러나, not:(selector) 가상 클래스는 지원하지 않는 브라우저들이 많다.

Safari, iOS Safari, Firefox 등 소수의 브라우저 만이 지원하고 있으니 참고해서 사용하자.

 

caniuse.com/?search=not%3A 

Can I use... Support tables for HTML5, CSS3, etc