CSSの:lang()疑似クラスセレクターとは？使い方と実践的なサンプルコードを解説

CSSの:lang()疑似クラスセレクターは、要素に指定されたlang属性の値に基づいて要素を選択するためのセレクターです。これにより、コンテンツに関連付けられた特定の言語をターゲットにして、言語ごとに異なるスタイルを適用できます。多言語対応サイトでフォントや装飾を言語別に切り替えたい場合などに非常に便利な機能です。

構文（シンタックス）

:lang()疑似クラスの基本構文は以下の通りです。

:lang(言語コード){
    /* スタイル宣言 */
}

引数には「ja」（日本語）、「en」（英語）、「it」（イタリア語）といったBCP 47形式の言語タグを指定します。なお、:lang()はlang属性の継承も考慮してマッチングを行う点が、単純な属性セレクター[lang=...]との大きな違いです。

それでは、実際の使用例を見ていきましょう。

例1：段落要素と言語ラベルの表示

次の例では、p要素のlang属性の値に応じて、::after疑似要素を使って段落の後ろに言語名を自動的に表示しています。

<!DOCTYPE html>
<html>
<head>
<style>
p:lang(it)::after {
    padding: 20px;
    content: '~ Italian';
    font-style: italic;
}
p:lang(es)::after {
    padding: 8px;
    content: '~ Spanish';
    font-style: italic;
}
p:lang(en)::after {
    padding: 20px;
    content: '~ English';
    font-style: italic;
}
</style>
</head>
<body>
<p lang='it'>Bella ciao</p>
<p lang='en'>Nice hello</p>
<p lang='es'>Bueno adios</p>
</body>
</html>

出力結果

各段落の末尾に、それぞれ「~ Italian」「~ English」「~ Spanish」というラベルが斜体で表示されます。このように、HTML側ではlang属性を付けるだけで、CSS側の条件分岐によって自動的に言語ラベルを出し分けられます。

例2：言語に応じた背景デザインの切り替え

続いて、より実践的な例として、div要素のlang属性に応じて、各国の国旗をイメージしたグラデーション背景を適用してみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
div{
    margin: 10px;
    padding: 10px;
    text-align: center;
    border: 1px solid black;
}
div:lang(it)::after {
    padding: 20px;
    content: '~ Italy';
    font-style: italic;
}
div:lang(es)::after {
    padding: 8px;
    content: '~ Spain';
    font-style: italic;
}
div:lang(nl)::after {
    padding: 20px;
    content: '~ Belgium';
    font-style: italic;
}
div:lang(es){
    background-image: linear-gradient(red 25%, yellow 25%, yellow 75%, red 75%);
}
div:lang(it){
    background-image:linear-gradient(90deg, #00ae00 33.3%, white 33.3%, white 66.6%, red 66.6%);
}
div:lang(nl){
    background-image:linear-gradient(90deg, black 33.3%, yellow 33.3%, yellow 66.6%, red 66.6%);
}
</style>
</head>
<body>
<div lang='it'>Rome</div>
<div lang='nl'>Brussels</div>
<div lang='es'>Madrid</div>
</body>
</html>

出力結果

「Rome」のボックスにはイタリア国旗風の緑・白・赤の縦グラデーション、「Brussels」にはベルギー国旗風の黒・黄・赤の縦グラデーション、「Madrid」にはスペイン国旗風の赤・黄・赤の横グラデーションがそれぞれ適用され、各ボックスの後ろには国名が斜体で表示されます。

このように:lang()疑似クラスを使えば、JavaScriptに頼ることなく、HTMLのlang属性だけで言語ごとの見た目を柔軟に制御できます。アクセシビリティの観点からもlang属性の正しい設定は推奨されているため、:lang()と組み合わせた活用は多言語サイト制作において有効なテクニックといえるでしょう。

CSSコメントの書き方と使い方を徹底解説

CSSセレクターと宣言の基本をわかりやすく解説！構文と主要セレクター早見表

CSSの:nth-child()疑似クラスの使い方と実例まとめ
CSSの:nth-child()疑似クラスは、親要素の中でn番目に位置する子要素を選択するためのセレクタです。リストやカード型レイアウトなど、繰り返し表示される要素のうち特定の位置だけにスタイルを適用したい場合に非常に便利です。構文 :nth-child()疑似クラスの基本構文は以下のとおりです。 :nth-child(n){ /*スタイル宣言*/ } 引数には単純な数値のほか、「odd（奇数番目）」「even（偶数番目）」といったキーワードや、「2n+1」のような数式も指定できるため、柔軟なスタイリングが可能です。例1：複数のボックスに個別の背景色を適用する
CSSのborder-colorプロパティの使い方を徹底解説
CSSのborder-colorプロパティとはCSSのborder-colorプロパティは、要素の境界線（ボーダー）の色を指定するために使用します。4つの値をスペースで区切って記述することで、上・右・下・左の各辺に異なる色を一度に設定することも可能です。また、border-top-color（上）、border-right-color（右）、border-bottom-color（下）、border-left-color（左）といった個別のプロパティを使えば、特定の一辺だけ色を変更することもできます。基本構文border-colorプロパティの基本的な書式は以下のとおりです。セレクター { &