[CSS] 疑似セレクタ「:lang」で特定の言語コードを指定した要素にスタイルを適用しよう!

1.疑似セレクタ「:lang」とは?

疑似セレクタ「:lang」は「要素名:lang(言語) { ~ }」のカッコ内で指定したlang属性を持つ要素にスタイルを適用します。

言語コードには、ja（日本語）、en（英語）、fr（フランス語）、zh（中国語）などがあります。

2.疑似セレクタ「:lang」の使い方

それでは疑似セレクタ「:lang」の使い方をみていきましょう。

・・・

<p lang="en">Hello World!!</p>

・・・

p:lang(en) {
　color: red;
}

言語コードが英語(en)に指定されたp要素にスタイルを適用します。

疑似セレクタはなかなかイメージしづらいので実際に使ってみてどのようにスタイルが適用されるか確認するといいかと思います。