2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

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

疑似セレクタ(:lang)の評価
頻出度
(1.0)
重要度
(1.0)
総合評価
(1.0)




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要素にスタイルを適用します。

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




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です