본문으로 바로가기

[CSS] deep selector

category Helloworld!/CSS 2019.06.27 14:05

부모 컴퍼넌트에 있는 엘리먼트 뿐만 아니라 자식 컴퍼넌트에도 동일한 클래스명이 있다면 전부 적용

 

CSS 에서 사용 하는 방법

.parent-class >>> .child-class { /* ... */ } // 1번째 사용 방법
.parent-class[data-v-f3f3eg9] .child-class { /* ... */ } // 2번째 사용 방법

SCSS 에서 사용하는 방법

.parent-class { // 1번째 사용 방법 : 이 방법은 deprecated 될 예정이라 2번째 사용 방법으로 사용하자
  & /deep/ .child-class {
    background-color: #000;
  }
}
 
.parent-class { // 2번째 사용 방법
  &::v-deep .child-class {
    background-color: #000;
  }
}


참고사이트

 

How do I use /deep/ or >>> in Vue.js?

So, I've read here that in Vue.js, you can use /deep/ or >>> in a selector in order to create style rules that apply to elements inside of child components. However, attempting to use this...

stackoverflow.com

 

dart-sass does not support /deep/ selector · Issue #3399 · vuejs/vue-cli

Version 3.4.0 Reproduction link https://github.com/lianzhao/vuecli-3.4 Environment info Environment Info: System: OS: macOS Sierra 10.12.4 CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz Bina...

github.com


댓글을 달아 주세요