<div class="example-cntr dir">
    <h1>CSS <code>:dir()</code> pseudo-class</h1>
    <p>The <code>:dir()</code> pseudo-class targets elements whose directionality are specified in the document. In other words, for the <code>:dir()</code> pseudo-class to work, we need to specify the directionality of the element in the markup with the
        <code>dir</code> HTML attribute.</p>
    <p>There are two directions currently available and supported: <code>ltr</code>, which means “left to right”; and <code>rtl</code> which means “right to left”.</p>
    <p>At the moment of writing this, only Firefox with a prefixed <code>-moz-dir():</code> selector supports the <code>:dir()</code> pseudo-class. See screenshot at the bottom.</p>
    <p><span class="underline">Note:</span> Trying to combine the prefixed and unprefixed versions into a single rule, won’t work. We need to create two separate rules.</p>
    <div class="example">
        <h2>Example 1</h2>
        <p>The paragraph in the following article is in Arabic (which is written right to left), so the text will be color red:</p>
        <article dir="rtl">
            <p>التدليك واحد من أقدم العلوم الصحية التي عرفها الانسان والذي يتم استخدامه لأغراض الشفاء منذ ولاده الطفل.</p>
        </article>
    </div>
    <div class="example">
        <h2>Example 2</h2>
        <p>Now, the paragraph in the following article is in English (which is written left to right), so the text will be color blue:</p>
        <article dir="ltr">
            <p>If you already know some HTML and CSS and understand the principles of responsive web design, this book is for you.</p>
        </article>
    </div>
    <p>Here's a screenshot of how the above paragraphs look in Firefox:</p>
    <div class="screenshot">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/dir-pseudo-class-on-Firefox.png" alt=":dir() pseudo-class in Firefox">
    </div>    
</div>

//:dir()
//right-to-left content (Arabic)
article :dir(rtl) { color: red; }
article :-moz-dir(rtl) { color: red; }

//left-to-right content (English)
article :dir(ltr) { color: blue; }
article :-moz-dir(ltr) { color: blue; }


//Styling stuff not needed for demo
body {
    text-align: left;
    line-height: 1.8;
}
h1 {
    font-size: 22px;
    text-transform: none;
    border-bottom: #636363 1px dotted;
    code {
        display: inline-block;
        margin-bottom: 10px;
        color: $y;
        background: none;
        box-shadow: none;
    }
}
code { font-size: 1em; }
.example-cntr {
    max-width: 800px;
    margin: auto;
    padding: 30px;
    box-shadow: 0 1px 2px rgba(black,.3);
    background: rgba(black,.15);
    & > code {
        display: block;
        margin-bottom: 10px;
        font-size: 22px;
        color: $y;
        background: none;
        box-shadow: none;
    }
}
small {
    display: block;
    margin: 20px 0 10px;
    padding-top: 10px;
}
.underline { text-decoration: underline; }
.example {
    margin: 0 20px;
    padding: 20px;
    background: rgba(black,.2);
    margin-bottom: 20px;
    &:last-child { margin-bottom: 0; }
    h2 { margin-top: 0; }
}
.screenshot {
    text-align: center;
    img { width: 468px; }
}