562169-2a.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 }

   :dir(foopy) { color: red }

   div { text-align: left; }

  </style>

  <script type="text/javascript">

function switchDir()

    document.dir = "rtl";

  </script>

 </head>

 <body onload="switchDir()">

  <div>This element has default direction.</div>

  <div dir="ltr">This element is ltr.</div>

  <div dir="rtl">This element is rtl.</div>

  <div dir="ltr">

    <div>This element should inherit ltr.</div>

    <div dir="ltr">This element is ltr.</div>

    <div dir="rtl">This element is rtl.</div>

  </div>

  <div dir="rtl">

    <div>This element should inherit rtl.</div>

    <div dir="ltr">This element is ltr.</div>

    <div dir="rtl">This element is rtl.</div>

  </div>

  <div dir="foopy">This element has an invalid dir attribute and

    should have default direction.</div>

 </body>

</html>