忽略CSS类中的属性

Question

Hi I am trying to implement RTL in my website. I have a check box like this in CSS

.labeled-checkbox .checkbox {
  position: absolute;
  top: 0px;
  right: 0px;
  margin-top: -1px;
}

In case of RTL language a class will be added dynamically to the html file and a new style will be added to CSS as below.

.locale-right-to-left .labeled-checkbox .checkbox {
  position: absolute;
  top: 0px;
  left: 0px;
  margin-top: -1px;
}

Now in this case check box should be moved to the left most direction . But its not happening as both the left and right property are added to the check box. Is there any way we can ignore the right:0px and only left:0px can be used in case of RTL languages?

Answer 1

Add right: auto; to your RTL class

   .locale-right-to-left .labeled-checkbox .checkbox {
      position: absolute;
      top: 0px;
      left: 0px;
      right: auto; 
      margin-top: -1px;
    }

Answer 2

Use right: auto in your .locale-right-to-left .labeled-checkbox .checkbox styles to override the right rule

https://developer.mozilla.org/en-US/docs/Web/CSS/right

Answer 3

If you add a css class dynamically, you can also remove one. So add a class locale-left-to-right as default so then you can write the following:

.locale-left-to-right .labeled-checkbox .checkbox {
    position: absolute;
    top: 0px;
    right: 0px;
    margin-top: -1px;
}