562169-2a.html (955B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>dir() selector</title> 6 <style> 7 :dir(ltr) { color: blue } 8 :dir(rtl) { color: lime } 9 :dir(foopy) { color: red } 10 div { text-align: left; } 11 </style> 12 <script type="text/javascript"> 13 function switchDir() 14 { 15 document.dir = "rtl"; 16 } 17 </script> 18 </head> 19 <body onload="switchDir()"> 20 <div>This element has default direction.</div> 21 <div dir="ltr">This element is ltr.</div> 22 <div dir="rtl">This element is rtl.</div> 23 <div dir="ltr"> 24 <div>This element should inherit ltr.</div> 25 <div dir="ltr">This element is ltr.</div> 26 <div dir="rtl">This element is rtl.</div> 27 </div> 28 <div dir="rtl"> 29 <div>This element should inherit rtl.</div> 30 <div dir="ltr">This element is ltr.</div> 31 <div dir="rtl">This element is rtl.</div> 32 </div> 33 <div dir="foopy">This element has an invalid dir attribute and 34 should have default direction.</div> 35 </body> 36 </html>