ywork2020.com

Title

要素のlang属性を検知する

目次 (INDEX)

:langとは

ここで説明する:lang とは次の語句からなるCSSの疑似クラスです。
language
読み: ランゲージ
意味: 言語

目次に戻る

:lang疑似クラスの概要

この疑似クラスはセレクタに該当する要素の lang属性 の値を検知して一時的なプロパティ値の変更を行います。

:langには引数が必要です。引数には国名コードを与えます。
※国名コードについては lang属性 のページを参照してください。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。この疑似クラスの記述は以下のような書き方になります。

セレクター:lang(国名コード){プロパティ名: 設定値;}
:lang(国名コード){プロパティ名: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

目次に戻る

参考: 要素のlang属性を検知する

ここでは4つのdiv要素に lang属性 をつけてコンテンツが各国の言語でこあることを表しています。

CSSではdiv要素に:lang疑似クラスをつけて引数に(us)を指定しました。 これにより、アメリカの言語で記述されているコンテンツが:langの対象となります。

Ciao
こんにちは
안녕하세요
Hello

<body>
	<div lang="it">Ciao</div>
	<div lang="ja">こんにちは</div>
	<div lang="kr">안녕하세요</div>
	<div lang="us">Hello</div>
</body>
<style>
	div{
		background-color: ##powderblue;
		border: medium outset ##darkgray;
		padding: 5px;
		text-align: center;
		width: 30%;
	}
	div:lang(us){
		background-color: ##cyan;
	}
</style>

目次に戻る