Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
- トップページ
- CSSプロパティ辞典
- 【CSSセレクタ】E:target
【CSSセレクタ】E:target
『セレクタ:target』で、URLのハッシュ値と同じid要素を持つ要素に適用できます。『ハッシュ値』(フラグメント、アンカー)とはURLに記述されている『#』以降の記述となります。例えば『http://wp-p.info/index.html#hoge』ならば『hoge』がハッシュ値です。こちらは一般に『擬似クラス』(:target擬似クラス)と呼ばれます。IE8以下では動きません。
サンプルコード
p:target { color: red;} /* 『ハッシュ値』と同じid属性を持つp要素を赤字にします。 */
ブラウザでの表示結果
p:target { color: red;} /* 『ハッシュ値』と同じid属性を持つp要素を赤字にします。 */
<a href="#hoge_sample">こちらをクリックするとテキストの色が変わります。</a> <p id="hoge_sample">色が変更されます。</p>
こちらをクリックするとテキストの色が変わります。
色が変更されます。
対応ブラウザ
| IE6 | IE7 | IE8 | IE9 | IE10 | IE11 | Safari | Chrome | Firefox | Opera |
|---|---|---|---|---|---|---|---|---|---|
| iPhone Safari | Android2系 標準ブラウザ | Android4系 標準ブラウザ |
|---|---|---|
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
