- HOME
- > BLOG CATEGORY
- 【CSS】target擬似クラス lang擬似クラスの使い方!
![NEW](https://shu-naka-blog.com/wp-content/themes/shu/images/common/new-arrow.png)
- お知らせ
- NEW 2024.05.16 【CSS】グラデーション色々なパターンを解説!
- お知らせ
- NEW 2024.05.15 【WordPress】親カテゴリーの子カテゴリー一覧を表示する方法
- お知らせ
- 2024.05.09 【レスポンシブデザイン】アニメーションが動かない原因
こんな方に読んでほしい
:target、:lang
の使い方について学びたい方へ今回はtargetとlangについての解説になります。
ターゲット擬似クラス(target)とは、アンカーリンクのターゲット先の要素にスタイルを適用します。
言語情報擬似クラス(lang)とは、特定の言語が指定された要素にスタイルを適用します。
[記事の内容]
:target
とは、アンカーリンクのターゲット先の要素にスタイルを適用します。
書き方は以下のようになります。
/*--target--*/
要素:target {プロパティ: 値;}
htmlのアンカータグ(#link01)に対して、CSSでの装飾を指定します。
指定する際には、#link01:target
の様な形で指定します。
1つ目の要素をクリックすると、targetによりボックスの背景色が変更します。
2つ目の要素をクリックすると、targetにより線が追加します。
3つ目の要素をクリックすると、targetにより背景色と文字色が変更します。
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
とは、特定の言語が指定された要素にスタイルを適用します。
書き方は以下のようになります。
/*--target--*/
要素:lang {プロパティ: 値;}
主に、日本語は=ja、英語は=en、アメリカ英語は=en-USになります。
1つ目は、ja(日本語)に対して、文字色をyellowに指定しています。
1つ目は、en(英語)に対して、文字色をlimeに指定しています。
lang 言語情報擬似クラス
こんにちは
Hello
<p lang="ja">こんにちは</p>
<p lang="en">Hello</p>
/*--日本語に適用--*/
p:lang(ja) {color:yellow;}
/*--英語に適用--*/
p:lang(en) {color:lime;}
今回はこれで以上です
2024.05.15
2024.05.09
2024.05.09
2024.03.07
2024.05.15
2024.05.14
2024.05.09
2024.05.09
2024.05.09
2024.05.09
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2023 shu-naka-blog