Using :lang pseudo-class

Declaring :lang pseudo class without prefix it with other selector, will apply this style both on the parent and its descendants.

by Konstantin Rouda

HTML

<article class="parent" lang="en-uk">

<p><b>Cur post Tarentum ad Archytam?</b> Restinguet citius, si ardentem acceperit. Et quidem, inquit, vehementer errat; At coluit ipse amicitias. Ex ea difficultate illae fallaciloquae, ut ait Accius, malitiae natae sunt. An est aliquid per se ipsum flagitiosum, etiamsi nulla comitetur infamia? Sed tu istuc dixti bene Latine, parum plane. Duarum enim vitarum nobis erunt instituta capienda. <mark>Disserendi artem nullam habuit.</mark> Quod si ita sit, cur opera philosophiae sit danda nescio. </p>

<p>At iste non dolendi status non vocatur voluptas. Duo Reges: constructio interrete. Tibi hoc incredibile, quod beatissimum. Frater et T. Nihil opus est exemplis hoc facere longius. <a href='http://loripsum.net/' target='_blank'>Istam voluptatem, inquit, Epicurus ignorat?</a> Itaque ad tempus ad Pisonem omnes. Quod non faceret, si in voluptate summum bonum poneret. <i>Si quae forte-possumus.</i> </p>

<dl>
	<dt><dfn>Qui convenit?</dfn></dt>
	<dd>Hoc Hieronymus summum bonum esse dixit.</dd>
	<dt><dfn>Non semper, inquam;</dfn></dt>
	<dd>Hoc tu nunc in illo probas.</dd>
	<dt><dfn>Reguli reiciendam;</dfn></dt>
	<dd>Ut placet, inquit, etsi enim illud erat aptius, aequum cuique concedere.</dd>
	<dt><dfn>Immo videri fortasse.</dfn></dt>
	<dd>Habes, inquam, Cato, formam eorum, de quibus loquor, philosophorum.</dd>
</dl>


<p><mark>Bestiarum vero nullum iudicium puto.</mark> Quae duo sunt, unum facit. <a href='http://loripsum.net/' target='_blank'>Nam ante Aristippus, et ille melius.</a> Igitur ne dolorem quidem. Itaque hic ipse iam pridem est reiectus; Praeteritis, inquit, gaudeo. Ne discipulum abducam, times. Neminem videbis ita laudatum, ut artifex callidus comparandarum voluptatum diceretur. <a href='http://loripsum.net/' target='_blank'>At multis se probavit.</a> <b>Vide, quaeso, rectumne sit.</b> Neque enim disputari sine reprehensione nec cum iracundia aut pertinacia recte disputari potest. <b>Quis istud possit, inquit, negare?</b>...

CSS

/*Actual Style*/

/*Declares rule without prefix it with other more specific selector*/
/*Rule will be applied to the parent element with the lang attribute and its descendants (children and grand-children)*/

:lang(en) {
  border: 1px solid;
}

/*Declares rule and prefix it with other more specific selector*/
/*Rule will be applied only to the parent element with the lang attribute*/

/*
.parent:lang(en) {
  border: 1px solid;
}
*/













/*Basic Style*/
HTML {
  font-size: 100%;
  line-height: 1.5;
  box-sizing: border-box;
}

BODY {
  margin: 0;
  color: #3a3d40;
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}

.parent {
  background: #fff;
  max-width: 95%;
  margin: .5rem auto;
}