【テクニカル・上級編】 :lang()擬似クラス – CSS実践ガイド

`:lang()`擬似クラスの深層：属性セレクタの呪縛を断ち、レンダリング・パイプラインを最適化するアーキテクチャ

フロントエンドの現場で長くCSSを書いていると、DOMの構造変化や動的な言語切り替え（i18n）に翻弄されるフェーズが必ずやってくる。多言語対応のWebアプリケーションを構築する際、あなたは何気なく属性セレクタを使っていないだろうか？

/ ありがちな実装：これ、実はブラウザのレンダリングエンジンにとっては結構重い /
[lang=”ja”] .button { font-family: “Hiragino Sans”, sans-serif; }
[lang=”en”] .button { font-family: “Inter”, sans-serif; }

「動くから問題ない」？ いや、待ってほしい。グローバルなSaaSや、数千のコンポーネントが入り乱れるエンタープライズ・アプリケーションにおいて、この書き方はDOMツリーが巨大化するにつれて確実にパフォーマンスのボトルネックになる。

今回は、ブラウザの内部挙動、CSSパーサーの最適化アルゴリズム、そしてメモリ効率の観点から、`:lang()`擬似クラスの本質を丸裸にしていく。単なる「言語を判定する便利機能」としての認識を捨て、レンダリング・パイプラインをハックするための強力な武器として使いこなすための知見を共有しよう。

—

なぜ `:lang()` なのか？属性セレクタ `[lang=”…”]` との決定的な構造的違い

まず、ブラウザがCSSセレクタを評価するメカニズムの基本に立ち返る。
属性セレクタ `[lang=”ja”]` は、DOMノードが持つすべての属性（Attribute）のマップを走査し、文字列の部分一致や完全一致の評価を行う。これはDOMの構造やツリーの継承関係を無視した、いわば「力技（Brute Force）」に近いマッチングだ。

一方、`:lang()` 擬似クラスはまったく異なる挙動を示す。

1. 祖先要素からの「言語の継承（Inheritance）」をネイティブ理解する

HTMLにおいて、言語属性はDOMツリーを伝播する。親要素に `lang=”ja”` が指定されていれば、その子孫要素は明示的に上書きされない限り、すべて日本語圏のコンテキストとして扱われる。

属性セレクタでは、この「HTML仕様としての言語の継承」をCSS側でハンドリングできない。そのため、すべての要素に `[lang=”ja”]` をヒットさせるか、冗長なセレクタを書くハメになる。
しかし、`:lang(ja)` はブラウザの言語マッチングアルゴリズム（BCP 47準拠）に直接フックする。つまり、親要素に指定された言語を子孫要素が自然に継承し、CSSエンジン側でスマートに評価してくれるのだ。

2. サブタグ（地域コード）の柔軟なマッチング

例えば、`lang=”en-US”` や `lang=”en-GB”` のようなロケール指定がある場合、属性セレクタ `[lang=”en”]` ではマッチしない（完全一致や部分一致のワイルドカード `[lang^=”en”]` を使う必要があるが、これまたセレクタの評価コストを跳ね上げる）。

しかし、`:lang(en)` であれば、ブラウザの言語マッチングロジックにより、`en-US` も `en-GB` も自動的にキャッチしてくれる。この「言語のファジーマッチング」をブラウザのC++層（Blink, WebKit, Gecko）にネイティブで肩代わりさせられる点こそ、アーキテクトが `:lang()` を選ぶべき最大の理由である。

—

実践：大規模アプリケーションにおける `:lang()` アーキテクチャ

では、実際のモダンなWebアプリケーションでどのようにこの特性を活かすべきか。具体的なコードを見ていこう。

以下の例は、多言語対応のカードコンポーネントにおける、`:lang()` を活用したスタイルシートの設計だ。

/ =================================================================
Base Component: カードコンポーネントの基本設計
言語が変わっても、レイアウトの骨格はブラウザの継承性に委ねる
================================================================= /
.card {
display: flex;
flex-direction: column;
padding: 1.5rem;
border-radius: 8px;
/ フォントのフォールバックを言語ごとに最適化する /
font-family: system-ui, -apple-system, sans-serif;
}

/ =================================================================
Language-Specific Overrides:
:lang() による宣言的なタイポグラフィの切り替え
================================================================= /

/ 日本語環境の場合：行高とフォントウェイトの微調整 /
.card:lang(ja) {
/ 日本語は漢字が含まれるため、英語よりもわずかに行高を広げると可読性が爆発的に上がる /
line-height: 1.7;
letter-spacing: 0.03em;
}

/ 英語環境の場合：プロポーショナルフォントの最適化 /
.card:lang(en) {
line-height: 1.4;
letter-spacing: -0.011em;
}

/ アラビア語などのRTL（右から左へ流れる言語）のコンテキスト /
.card:lang(ar),
.card:lang(fa) {
direction: rtl;
text-align: right;
font-family: “Amiri”, serif; / アラビア語圏向けの美しいセリフ体 /
}

/ 内部のタイポグラフィ要素へのカスケード制御 /
.card__title {
font-size: 1.25rem;
font-weight: 700;
}

/ `:lang()` は祖先要素の指定を継承するため、子要素にわざわざ lang セレクタを書く必要がない /
.card:lang(ja) .card__title {
font-feature-settings: “palt” 1; / 日本語プロポーショナルかなメトリクスの有効化 /
}

このアプローチの美しさは、JavaScriptや親のDOM構造に依存せずとも、HTMLの `` タグや `