562169-1.html (1169B)
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 </head> 13 <body> 14 <div>This element has default direction.</div> 15 <div dir="ltr">This element is ltr.</div> 16 <div dir="rtl">This element is rtl.</div> 17 <div dir="ltr"> 18 <div>This element should inherit ltr.</div> 19 <div dir="ltr">This element is ltr.</div> 20 <div dir="rtl">This element is rtl.</div> 21 <div><span>Every <span>word <span>in <span>this <span>element <span>should <span>inherit <span>ltr</span></span></span></span></span></span></span></span>.</div> 22 </div> 23 <div dir="rtl"> 24 <div>This element should inherit rtl.</div> 25 <div dir="ltr">This element is ltr.</div> 26 <div dir="rtl">This element is rtl.</div> 27 <div><span>Every <span>word <span>in <span>this <span>element <span>should <span>inherit <span>rtl</span></span></span></span></span></span></span></span>.</div> 28 </div> 29 <div dir="foopy">This element has an invalid dir attribute and 30 should have default direction.</div> 31 </body> 32 </html>