Search code examples
cssdirection

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

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".

Solution

  • 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.