css 메뉴) 가상 클래스 :not

 

:not(.클래스이름)  가상 클래스 :not

:not(.클래스이름) {  ~~~ css 코드  }

'  .클래스이름이 아니면 중괄호 안의 css코드 동작을 수행해라  '

라는 뜻이다. not 두개를 같이 쓰는건 어떻게 할까?

 

 

간단하다  붙여쓴다.

:not(.new):not(.popular( {

   margin-top: 10px;

}

-> 클래스 이름이 now, popular가 아니면 마진탑 10px 적용!

156번-새로 나온 메뉴, 164번-인기 메뉴는 마진탑 미적용

176번-시즈널 메뉴, 185번-시그니처 샐러드는 적용!! 

10px 적용되서 노랑 배경색이 보인다. 

 

 

 

 

 

---

메뉴 리스트

펼쳤을때 아래화살표 ∨  

 

 

닫았을때 위 화살표 ∧  

.menu-list-area {
  padding: 28px $m-padding 10px;
  background-color: #fff;

  //new, popular 클래스 아니면 마진탑 10px 
  &:not(.new):not(.popular) {
    margin-top: 10px;
  }

  &.new {
    border-bottom: 1px solid $booking-color-border144;
  }

  &.is-closed {
    padding: 24px $m-padding;

    & + .is-closed {
      margin-top: 0;
      border-top: 1px solid $booking-color-border144;
    }

    .ico-arrow { 
      transform: rotate(180deg);
    }

    .menu-list { 
      display: none;  //닫으면 안보임
    }
  }

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

출처

나, 뽀짝코딩