<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><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><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
This Pen doesn't use any external JavaScript resources.