Селектор :lang() у CSS — стилі за мовою вмісту сторінки

HTML

<p lang="it">Questo paragrafo è in italiano — жовтий.</p>
<p>Звичайний український абзац — без змін.</p>

CSS

p:lang(it) {
    background: yellow;
}

HTML

<div class="cols">
    <div class="card">
        <h4>Правило <code>:lang(fr)</code></h4>
        <div class="lang-a" lang="fr">
            <p>абзац усередині блока з <code>lang="fr"</code></p>
            <p>і ще один — обидва підсвічено</p>
        </div>
        <div class="lang-a" lang="fr-CA"><p>блок <code>lang="fr-CA"</code></p></div>
        <div class="lang-a" lang="fra"><p>блок <code>lang="fra"</code> — не збіг</p></div>
    </div>

    <div class="card">
        <h4>Правило <code>[lang="fr"]</code></h4>
        <div class="lang-b" lang="fr">
            <p>абзаци всередині лишилися без стилю</p>
            <p>атрибут на них не написаний</p>
        </div>
        <div class="lang-b" lang="fr-CA"><p>блок <code>lang="fr-CA"</code> — не збіг</p></div>
        <div class="lang-b" lang="fra"><p>блок <code>lang="fra"</code> — не збіг</p></div>
    </div>
</div>

<h4 class="cap">Лапки самі підбираються за мовою</h4>
<ul class="quotes">
    <li lang="uk">українською: <q>цитата</q></li>
    <li lang="en">англійською: <q>quotation</q></li>
    <li lang="fr">французькою: <q>citation</q></li>
    <li lang="de">німецькою: <q>Zitat</q></li>
</ul>

<h4 class="cap">Список через кому й зірочка замість підтеґа</h4>
<ul class="wide">
    <li lang="de">німецька — правило <code>:lang(de, fr)</code></li>
    <li lang="fr">французька — те саме правило</li>
    <li lang="de-CH">швейцарська німецька — правило <code>:lang("*-CH")</code></li>
    <li lang="fr-CH">швейцарська французька — те саме</li>
    <li lang="it">італійська — жодне з двох правил не збіглося</li>
</ul>

CSS

.cols {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.card {
    flex: 1 1 280px;
    padding: 4px 14px 12px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
}

.card h4 {
    margin: 14px 0 10px;
}

.card > div {
    margin: 10px 0;
    padding: 6px 12px;
    border: 1px dashed #b9c6d8;
    border-radius: 4px;
}

.card p {
    margin: 6px 0;
}

/* ліва колонка: збіг за МОВОЮ — бере і сам блок, і все, що всередині */
.lang-a:lang(fr),
.lang-a :lang(fr) {
    background: #edf9ef;
    outline: 2px solid #3a9a4f;
    outline-offset: 1px;
}

/* права колонка: збіг за АТРИБУТОМ — тільки там, де його написано */
.lang-b [lang="fr"],
.lang-b[lang="fr"] {
    background: #fdeeee;
    outline: 2px solid #d64545;
    outline-offset: 1px;
}

.quotes q:lang(uk) {
    quotes: '«' '»';
}

.quotes q:lang(en) {
    quotes: '“' '”';
}

.quotes q:lang(fr) {
    quotes: '« ' ' »';
}

.quotes q:lang(de) {
    quotes: '„' '“';
}

.quotes,
.wide {
    max-width: 560px;
    margin: 0;
    padding: 10px 14px 10px 34px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

.quotes li,
.wide li {
    margin: 6px 0;
}

.wide li:lang(de, fr) {
    color: #29713a;
    font-weight: 700;
}

.wide li:lang("*-CH") {
    background: #fff3d6;
}

.cap {
    margin: 26px 0 8px;
    font-size: 1rem;
    color: #5a6472;
}

code {
    background: #eef4ff;
    border-radius: 3px;
    padding: 0 4px;
}