562169-4.html - mozsearch

Enable keyboard shortcuts

<!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>