【CSS 】擬似要素 :lang()

HOME > ブログ > 実装ブログ > HTML・CSS > 【CSS 】擬似要素 :lang()

BLOGブログ

HTML・CSS

2025/01/06

:lang()擬似クラスとは？

:lang()擬似クラスは、HTML要素のlang属性に基づいてスタイルを適用するためのCSSセレクタです。たとえば、英語、フランス語、日本語など、特定の言語に応じたスタイルを設定できます。

基本構文

:lang(en) {
/* 英語に適用するスタイル */
}
:lang(ja) {
/* 日本語に適用するスタイル */
}
:lang(fr) {
/* フランス語に適用するスタイル */
}

例: HTMLとCSS

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>:lang()擬似クラスの例</title>
<style>
:lang(en) {
color: blue;
}

:lang(ja) {
color: red;
font-family: “Noto Sans JP”, sans-serif;
}

:lang(fr) {
color: green;
font-style: italic;
}
</style>
</head>
<body>
<p lang=”en”>This is English text.</p>
<p lang=”ja”>これは日本語のテキストです。</p>
<p lang=”fr”>Ceci est un texte en français.</p>
</body>
</html>