:lang()【言語属性要素】
:target【URIターゲット属性 対応要素】
メモ
- ":lang()":指定した言語属性要素を選択
- ":target":URIターゲット属性に対応する要素を選択
- 但し、直前のリンク先が対象 (CSS指定と相違)
構文
jQuery( ":lang(language【言語コード】)" ) 1.9
language【言語コード】(例) | 備考 |
---|---|
ja | 日本語 |
ja-JP | 日本語 (日本) |
en | 英語 |
en-UK | 英語 (イギリス) |
en-US | 英語 (アメリカ) |
jQuery( ":target" ) 1.9
関連
- jQuery リファレンス メモ
- CSS リファレンス メモ
- :target【リンク先要素】
- :lang(fr)【言語要素】
- jQuery (英語)
例
<div>灰色</div>
<div lang="ja-JP">灰色 (lang="ja-JP")</div>
<div>grey</div>
<div lang="en">grey (lang="en")</div>
<div>gray</div>
<div lang="en-US">gray (lang="en-US")</div>
<br>
<script>
$(":lang(ja-JP)").css( { "background-color":"gray", "color":"white" } ).append(" (ja-JP 対象)");
$(":lang(en)").css( { backgroundColor:"gray", color:"white" } ).append(" (en 対象)");
</script>
灰色
灰色 (lang="ja-JP")
grey
grey (lang="en")
gray
gray (lang="en-US")
<style>
#link4:target { background-color:lightgray; }
</style>
<div id="id2">
クリックで直前のリンク先が変化
<div><a href="#link1">リンク1へ</a></div>
<div><a href="#link2">リンク2へ</a></div>
<div><a href="#link3">リンク3へ</a></div>
<div><a href="#link4">リンク4へ (CSS指定)</a></div>
</div>
<br>
<div id="link1">リンク1</div>
<div id="link2">リンク2</div>
<div id="link3">リンク3</div>
<div id="link4">リンク4 (CSS指定)</div>
<script>
$("#id2 a").click(function(){
$(":target").css( { color:"red", fontWeight:"bold" } );
$(":not(:target)").css( { color:"black", fontWeight:"normal" } );
});
</script>
リンク1
リンク2
リンク3
リンク4 (CSS指定)