<div class="example-cntr">
    <h1>CSS <code>:lang()</code> pseudo-class</h1>
    <p>The <code>:lang()</code> pseudo-class matches the language of an element determined by combination of the <code>lang=""</code> HTML attribute, the <code>&lt;meta></code> element and by information from the protocol like HTTP headers.</p>
    <p>The <code>lang=""</code> HTML attribute is commonly used in the <code>&lt;html></code> tag but it can also be used in any other tag if necessary.</p>
    <h2>Example</h2>
    <article lang="en">
        <h4>English</h4>
        <q>If you already know some HTML and CSS, and understand the principles of responsive web design, this book is for you.</q>
    </article>
    <article lang="fr">
        <h4>French</h4>
        <q>Si vous connaissez déjà les bases du HTML et CSS, et comprennez les principes du design web adaptif, ce livre est pour vous.</q>
    </article>
    <article lang="de">
        <h4>German</h4>
        <q>Falls Sie schon mit HTML und CSS vertraut sind, und die Prinzipien von responsivem Webdesign verstehen, ist dieses Buch für Sie.</q>
    </article>
     <article lang="de" class="ua">
        <h4>German 2 - <span class="note">This paragraph is also in German but the quote marks are added by the browser's User Agent. Either style of quote marks are correct for the German language.</span></h4>
        <q>Falls Sie schon mit HTML und CSS vertraut sind, und die Prinzipien von responsivem Webdesign verstehen, ist dieses Buch für Sie.</q>
    </article>
</div>
:lang(en) q { quotes: '“' '”'; }
:lang(fr) q { quotes: '«' '»'; }
:lang(de):not(.ua) q { quotes: '»' '«'; }



//Styling stuff not needed for demo
body {
    text-align: left;
    line-height: 1.5;
}
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;
    }
}
h3 span { font:italic normal 16px 'Source Sans Pro'; }
h4 {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: #333 1px solid;
    box-shadow: inset 0 -1px 0 #222;
}
code { font-size: 1em; }
.example-cntr {
    max-width: 800px;
    margin: 0 auto 50px;
    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;
    }
}
article {
    width: 90%;
    margin: auto;
    h4 { color: $y; }
}
q {
    font-family: Georgia;
    font-style: italic;
    color: #ddd;
}
.note {
    color: desaturate($y,50);
    font-size: 12px;
    letter-spacing: .5px;
}
View Compiled

External CSS

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/codepen-base_3.scss

External JavaScript

This Pen doesn't use any external JavaScript resources.