<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>dir() selector</title> <style> :dir(ltr) { color: blue } :dir(rtl) { color: lime } div { text-align: left; } </style> <script type="text/javascript"> function AppendElementWithChild() { var x = document.createElement("span"); x.innerHTML = "This span should inherit rtl from the parent. "; var y = document.createElement("span"); y.innerHTML = "This span should inherit rtl from the grandparent."; var z = document.getElementById("z"); x.appendChild(y); z.appendChild(x); } </script> </head> <body onload="AppendElementWithChild()"> <div id="z" dir="rtl">This element is rtl. </div> </body> </html>