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