Css: dir = "rtl" VS style = "direction: rtl"

Question

Css: dir = "rtl" VS style = "direction: rtl"

I know how style is when direction is inline

<div dir="rtl">foo</div>

div[dir="rtl"]
{
 ....;
}

But style

<div style="direction:rtl">foo</div> ?

Both behave as expected (correct "alignment" of the text), but I need a more subtle change for some elements inside (float, text-align ...), and I can’t set up my rule correctly in the second case.

I can not edit html. I MUST use the style = "direction: rtl".

+4

css direction

frenchone Mar 19 '14 at 15:57

source share

3 answers

dir = "auto" , ,

<div dir="auto">Hello, world!</div>
<br/>
<div dir="auto">لا إله إلا الله محمد رسول الله</div>
<br/>
<input type="text" dir="auto" value="Hello, world!" > 
<br/><br/>
<input type="text" dir="auto" value="لا إله إلا الله محمد رسول الله" >

Hide result

JSFIDDLE Demo https://jsfiddle.net/80k0drsf/

+7

Nott Responding 01 . '16 10:37

just add the rtl class to the html tag

<html dir="rtl" class="rtl">
 <head>
   <style>
      html[class*="rtl"] body {
         background-color:blue;
      }
      html[class*="rtl"] div{
         background-color:green;
      }
   </style>
 </haed>

 <body>

 <div>
 </div>

 </body>
</html>

-1

טאבו ישראל שרות לקוחות Apr 08 '17 at 18:47

source share

James Donnelly · Accepted Answer · 2014-03-19T15:59:05+0000

As you cannot change the HTML, a really really hacked selector would be:

div[style*="direction:rtl"] {
    ...
}

JSFiddle demo .

, style*=, style=, , direction:rtl, element style.

[style*="direction: rtl"] style, :

[style*="direction:rtl"], [style*="direction: rtl"] { ... }

style, "rtl", , ( , ):

[style*="rtl"] { ... }

JSFiddle.

Css: dir = "rtl" VS style = "direction: rtl"

More articles: