Rtl and ltr? Will this work?

Will this work? in the in the global style ?

:root[dir="rtl"] {
  .my-header {
      font-size: 20px;
      font-family: arabic-font;
      padding:0px;
      color: #FFFFFF;
      background-color: #cccccc;
  }
}

:root[dir="ltr"] {
  .my-header {
      font-size: 20px;
      font-family: normal-font;
      padding:0px;
      color: #FFFFFF;
      background-color: #001b3c;
  }
}

Or is there other ways? to use two style css depends on RTL AND LTR?