diff --git a/browser/base/content/abouthome/aboutHome.css b/browser/base/content/abouthome/aboutHome.css
index 75804f0de39..f877352896f 100644
--- a/browser/base/content/abouthome/aboutHome.css
+++ b/browser/base/content/abouthome/aboutHome.css
@@ -81,7 +81,7 @@ a {
   border-radius: 2.5px 0 0 2.5px;
 }
 
-body[dir=rtl] #searchText {
+#searchText:dir(rtl) {
   border-radius: 0 2.5px 2.5px 0;
 }
 
@@ -105,7 +105,7 @@ body[dir=rtl] #searchText {
   transition-duration: 150ms;
 }
 
-body[dir=rtl] #searchSubmit {
+#searchSubmit:dir(rtl) {
   border-radius: 2.5px 0 0 2.5px;
 }
 
@@ -147,8 +147,8 @@ body[dir=rtl] #searchSubmit {
   -moz-padding-start: 79px;
 }
 
-body[dir=rtl] #defaultSnippet1,
-body[dir=rtl] #defaultSnippet2 {
+#defaultSnippet1:dir(rtl),
+#defaultSnippet2:dir(rtl) {
   background-position: right 30px center;
 }
 
@@ -312,7 +312,7 @@ body[narrow] #restorePreviousSession {
   -moz-margin-end: 8px;
 }
 
-body[dir=rtl] #restorePreviousSession::before {
+#restorePreviousSession:dir(rtl)::before {
   transform: scaleX(-1);
 }
 
diff --git a/browser/devtools/layoutview/view.css b/browser/devtools/layoutview/view.css
index d9af1f10cd2..fca0c0804e2 100644
--- a/browser/devtools/layoutview/view.css
+++ b/browser/devtools/layoutview/view.css
@@ -22,7 +22,7 @@ body {
   vertical-align: top;
 }
 
-body[dir=rtl] > #header {
+#header:dir(rtl) {
   -moz-box-direction: reverse;
 }
 
@@ -34,7 +34,7 @@ body[dir=rtl] > #header {
   -moz-box-flex: 1;
 }
 
-body[dir=rtl] > #header > #element-size {
+#element-size:dir(rtl) {
   -moz-box-pack: end;
 }
 
diff --git a/browser/themes/gnomestripe/aboutCertError.css b/browser/themes/gnomestripe/aboutCertError.css
index d56159644c6..9b4612916e1 100644
--- a/browser/themes/gnomestripe/aboutCertError.css
+++ b/browser/themes/gnomestripe/aboutCertError.css
@@ -37,7 +37,7 @@ h2 {
   background-origin: content-box;
 }
 
-body[dir="rtl"] #errorPageContainer {
+#errorPageContainer:dir(rtl) {
   background-position: right 0;
 }
 
@@ -59,7 +59,7 @@ body[dir="rtl"] #errorPageContainer {
   cursor: pointer;
 }
 
-body[dir="rtl"] .expander > button {
+.expander > button:dir(rtl) {
   background-position: right center;
 }
 
@@ -67,6 +67,6 @@ body[dir="rtl"] .expander > button {
   background-image: url("chrome://browser/skin/aboutCertError_sectionCollapsed.png");
 }
 
-body[dir="rtl"] .expander[collapsed] > button {
+.expander[collapsed] > button:dir(rtl) {
   background-image: url("chrome://browser/skin/aboutCertError_sectionCollapsed-rtl.png");
 }
diff --git a/browser/themes/gnomestripe/aboutPrivateBrowsing.css b/browser/themes/gnomestripe/aboutPrivateBrowsing.css
index 974a7cc7c45..fde7496a7b9 100644
--- a/browser/themes/gnomestripe/aboutPrivateBrowsing.css
+++ b/browser/themes/gnomestripe/aboutPrivateBrowsing.css
@@ -34,7 +34,7 @@ body.normal > #errorPageContainer {
   background: url("moz-icon://stock/gtk-dialog-info?size=menu") no-repeat top left;
 }
 
-body[dir="rtl"] #moreInfo {
+#moreInfo:dir(rtl) {
   background-position: top right;
 }
 
diff --git a/browser/themes/pinstripe/aboutCertError.css b/browser/themes/pinstripe/aboutCertError.css
index d56159644c6..9b4612916e1 100644
--- a/browser/themes/pinstripe/aboutCertError.css
+++ b/browser/themes/pinstripe/aboutCertError.css
@@ -37,7 +37,7 @@ h2 {
   background-origin: content-box;
 }
 
-body[dir="rtl"] #errorPageContainer {
+#errorPageContainer:dir(rtl) {
   background-position: right 0;
 }
 
@@ -59,7 +59,7 @@ body[dir="rtl"] #errorPageContainer {
   cursor: pointer;
 }
 
-body[dir="rtl"] .expander > button {
+.expander > button:dir(rtl) {
   background-position: right center;
 }
 
@@ -67,6 +67,6 @@ body[dir="rtl"] .expander > button {
   background-image: url("chrome://browser/skin/aboutCertError_sectionCollapsed.png");
 }
 
-body[dir="rtl"] .expander[collapsed] > button {
+.expander[collapsed] > button:dir(rtl) {
   background-image: url("chrome://browser/skin/aboutCertError_sectionCollapsed-rtl.png");
 }
diff --git a/browser/themes/pinstripe/aboutPrivateBrowsing.css b/browser/themes/pinstripe/aboutPrivateBrowsing.css
index b7a08fae3e9..7dc446a8b0c 100644
--- a/browser/themes/pinstripe/aboutPrivateBrowsing.css
+++ b/browser/themes/pinstripe/aboutPrivateBrowsing.css
@@ -34,7 +34,7 @@ body.normal > #errorPageContainer {
   background: url("chrome://global/skin/icons/information-16.png") no-repeat top left;
 }
 
-body[dir="rtl"] #moreInfo {
+#moreInfo:dir(rtl) {
   background-position: top right;
 }
 
diff --git a/browser/themes/winstripe/aboutCertError.css b/browser/themes/winstripe/aboutCertError.css
index d56159644c6..9b4612916e1 100644
--- a/browser/themes/winstripe/aboutCertError.css
+++ b/browser/themes/winstripe/aboutCertError.css
@@ -37,7 +37,7 @@ h2 {
   background-origin: content-box;
 }
 
-body[dir="rtl"] #errorPageContainer {
+#errorPageContainer:dir(rtl) {
   background-position: right 0;
 }
 
@@ -59,7 +59,7 @@ body[dir="rtl"] #errorPageContainer {
   cursor: pointer;
 }
 
-body[dir="rtl"] .expander > button {
+.expander > button:dir(rtl) {
   background-position: right center;
 }
 
@@ -67,6 +67,6 @@ body[dir="rtl"] .expander > button {
   background-image: url("chrome://browser/skin/aboutCertError_sectionCollapsed.png");
 }
 
-body[dir="rtl"] .expander[collapsed] > button {
+.expander[collapsed] > button:dir(rtl) {
   background-image: url("chrome://browser/skin/aboutCertError_sectionCollapsed-rtl.png");
 }
diff --git a/browser/themes/winstripe/aboutPrivateBrowsing.css b/browser/themes/winstripe/aboutPrivateBrowsing.css
index 766b2cb77c5..77228d1c89c 100644
--- a/browser/themes/winstripe/aboutPrivateBrowsing.css
+++ b/browser/themes/winstripe/aboutPrivateBrowsing.css
@@ -34,7 +34,7 @@ body.normal > #errorPageContainer {
   background: url("chrome://global/skin/icons/information-16.png") no-repeat top left;
 }
 
-body[dir="rtl"] #moreInfo {
+#moreInfo:dir(rtl) {
   background-position: top right;
 }