I'm trying to change the css of a specific div (.cropper) inside a component called image-cropper but i don't know why it's not working Image of the html showing the div I want to access

And here is the css I tried to use to access the selected div:

image-cropper {
 div {
  .cropper {
   border-radius: 50%;
  }
 }
}

CodePudding user response：

From the looks of if, it seems that it is one more div deep. Also try adding !important; at the end, to override component css.

image-cropper > div > div.cropper {
border-radius: 50% !important;
}

CodePudding user response：

image-cropper div .cropper {border-radius: 50% !important;  }

use this css & check.

CodePudding user response：

That is possible with SASS.

image-cropper
  > div
    > .cropper border-radius: 50%;

Or

image-cropper{
  div{
    .cropper{
      border-radius: 50%;
    }
  }
}

Or in CSS you can only do like this:

image-cropper > div > .cropper{
   Border-radius: 50%;
}