CSS :target 疑似クラス| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
ページコンテンツ
:target 疑似クラス CSS プロパティとは
トピック:アンカー名が付いたURLは、ドキュメント内の特定の要素にリンクする 事ができる リンク先の要素がターゲット要素 :targetセレクタは、現在アクティブなターゲット要素をスタイルするために使用できる
疑似クラス セレクター :target
実例 コード 1
サンプル コードを試す :target {
border: 2px solid blue;
background-color: lightgray;
}
/* 現在の URL のフラグメントに一致する ID を持つ要素を選択 */- たとえば、次のURLには、abcという要素を指すフラグメンテーション(#記号)があります
http://www.example.com/index.html#abc
現在の URL が上記の通りの場合、以下の要素が :target セレクターで選択される
<p id="abc">Example</p>実例 コード 2
サンプル コードを試す.webref div {
display: none;
}
.webref div:target {
display: block;
}
/*タブ付きメニューを作成*/構文
:target { css : properties ; }
疑似クラス名 {スタイル要素のプロパティ : プロパティ値; }
| CSS バージョン | CSS 3 |
|---|
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 | |||||
|---|---|---|---|---|---|---|
| :target | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| 基本 サポート | フルサポート◯1 | フルサポート◯あり | フルサポート◯1 | フルサポート◯9 | フルサポート◯9.5 | フルサポート◯1.3 |
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 | ||||||
|---|---|---|---|---|---|---|---|
| :target | Android | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet |
| 基本 サポート | フルサポート◯2.1 | 不明 | フルサポート◯あり | フルサポート◯4 | フルサポート◯9.5 | フルサポート◯2 | 不明 |
