シュウ

今回は【CSS】target擬似クラス lang擬似クラスの使い方
についての解説になります！

こんな方に読んでほしい

• CSSを学び始めた方へ
• :target、:langの使い方について学びたい方へ
• 今回はターゲット擬似クラスと言語情報擬似クラスを学習しよう

今回はtargetとlangについての解説になります。
ターゲット擬似クラス(target)とは、アンカーリンクのターゲット先の要素にスタイルを適用します。
言語情報擬似クラス(lang)とは、特定の言語が指定された要素にスタイルを適用します。

target ターゲット擬似クラス

:targetとは、アンカーリンクのターゲット先の要素にスタイルを適用します。
書き方は以下のようになります。

/*--target--*/
要素:target {プロパティ: 値;}

htmlのアンカータグ(#link01)に対して、CSSでの装飾を指定します。
指定する際には、#link01:targetの様な形で指定します。

1つ目の要素をクリックすると、targetによりボックスの背景色が変更します。
2つ目の要素をクリックすると、targetにより線が追加します。
3つ目の要素をクリックすると、targetにより背景色と文字色が変更します。

<ul class="target-list">
 	<li><a href="#link01">1:targetによりボックスの色が変更します</a></li>
 	<li><a href="#link02">2:targetによりボーダー線が追加します</a></li>
	<li><a href="#link03">3:targetにより背景色と文字色が変更します</a></li>
</ul>

<div class="area">
	<div id="link01">1:box</div>
	<div id="link02">2:targetによりボーダー線が追加します</div>
	<div id="link03">3:targetにより背景色と文字色が変更します</div>
</div>

/*--以下省略--*/

/*--1つめ目 target--*/
#link01{
	width: 150px;
	height: 150px;
	/*--以下省略--*/
}
#link01:target{
	background: #ff4e4f; /*--背景色--*/
	color: #fff; /*--文字色--*/
}

/*--2つめ目 target--*/
#link02:target{
	border: solid 4px #ff4e4f; /*--ボーダー線--*/
	color: #fff #ffffff;  /*--文字色--*/
}

/*--3つめ目 target--*/
#link03:target{
	background-color: #ffffff; /*--背景色--*/
	color: #ff4e4f; /*--文字色--*/
}

lang 言語情報擬似クラス

:langとは、特定の言語が指定された要素にスタイルを適用します。
書き方は以下のようになります。

/*--target--*/
要素:lang {プロパティ: 値;}

主に、日本語は=ja、英語は=en、アメリカ英語は=en-USになります。

1つ目は、ja(日本語)に対して、文字色をyellowに指定しています。
1つ目は、en(英語)に対して、文字色をlimeに指定しています。

<p lang="ja">こんにちは</p>
<p lang="en">Hello</p>

/*--日本語に適用--*/
p:lang(ja) {color:yellow;}

/*--英語に適用--*/
p:lang(en) {color:lime;}

まとめ

今回はこれで以上です

最新記事

• 

  【CSS】文字の縁取りについて解説！

  2025.01.11

• 

  【CSS】画像を左右交互に配置について解説！

  2024.10.05

• 

  【CSS】グラデーション色々なパターンを解説！

  2024.05.15

• 

  【レスポンシブデザイン】アニメーションが動かない原因

  2024.05.09

関連記事

< 前の記事

【CSS】構造擬似クラス:only-child、:only-of-typeの使い方

次の記事 >

【CSS】not否定擬似クラスの使い方！