I know how to style when the direction is inline
<div dir="rtl">foo</div>
div[dir="rtl"]
{
....;
}
But how to style
<div style="direction:rtl">foo</div> ?
Both behaves as expected (right "alignment" of text) but I need finer tweaking for some elements inside (float, text-align...) and I can't set up my rule correctly in the second case.
I can't edit the html. I MUST use style="direction:rtl".
As you can't modify the HTML, a really really hacky selector would be:
div[style*="direction:rtl"] {
...
}
JSFiddle demo.
Note that I'm using style*= as opposed to just style= as this will also match elements which have more than just direction:rtl declared within the element's style property.
For extra strength in the selector, you could also use [style*="direction: rtl"] to handle style attributes which separate the values from the properties with a space:
[style*="direction:rtl"], [style*="direction: rtl"] { ... }
Alternatively in this case you could just match on a style attribute which contains "rtl", as I'm pretty sure this combination of characters isn't used in any other property (ignoring external resources like background image file names):
[style*="rtl"] { ... }
Updated JSFiddle demo.
Use dir="auto" on forms and inserted text in order to automatically detect the direction of content supplied at run-time
<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="لا إله إلا الله محمد رسول الله" >JSFIDDLE Demo https://jsfiddle.net/80k0drsf/
just add class "rtl" to 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>
