CSS 3のセレクタ解説::root、:not、:empty、:target

エ・ビスコム・テック・ラボ
2009-02-06 12:19:01
  • このエントリーをはてなブックマークに追加

:target

 :targetは、ページ内のターゲットに対してスタイルシートを適用するセレクタだ。

 たとえば、ウェブページではURLの末尾に「#text3」をつけてアクセスすると、ページ内でid属性を「text3」と指定したターゲット部分を開くことができる。次のサンプルではページ上部にリンクを用意して、ページ内の「テキスト1」「テキスト2」……にアクセスできるように設定した。「テキスト3」のリンクをクリックすると次のように表示される。

図7。「テキスト3」のリンクをクリックすると……(画像をクリックすると拡大します) 図7。「テキスト3」のリンクをクリックすると……(画像をクリックすると拡大します)
図8。「テキスト3」がブラウザ画面上部に表示される(画像をクリックすると拡大します) 図8。「テキスト3」がブラウザ画面上部に表示される(画像をクリックすると拡大します)


テキスト1

…略…

テキスト2

…略…

テキスト3

…略…

テキスト4

…略…

テキスト5

…略…
ブラウザで表示を確認する

 これに対して、:targetで次のようにスタイルシートを指定すると、リンクをクリックして表示したターゲット部分だけが黄色い罫線で囲んで表示される。

図9。「テキスト3」のリンクをクリックすると……(画像をクリックすると拡大します) 図9。「テキスト3」のリンクをクリックすると……(画像をクリックすると拡大します)
図10。「テキスト3」が黄色の罫線で囲んで表示される(画像をクリックすると拡大します) 図10。「テキスト3」が黄色の罫線で囲んで表示される(画像をクリックすると拡大します)
:target{
background-color: yellow;
}
ブラウザで表示を確認する

 CSS 3のセレクタについては以上で完了だ。CSS 2のセレクタと組み合わせて利用する細かなテクニックなども、また別の機会に紹介したい。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]