CSS基本文法 - CSS :target擬似クラス

2008/05/28 00:19Update
TAGS: CSS | :target擬似クラス

CSS3の　:target擬似クラスについて学びます。

はじめに


次のようなURIをよく見かけると思います。
http://example.com/html/top.html#section_2

周知の通り、ハイパーリンクは文書内の特定の部分をターゲット（終点アンカー）とすることができます。この場合は、文書を示すURI『ここではhttp://example.com/html/top.html』の後に『#』を加え、さらにアンカーを識別するための『フラグメント識別子（ここではsection_2）』を加えます。

◇　HTML文書例：
...

<a href="http://example.com/html/top.html#section_2">
文書内の特定の部分へのリンク
</a>

...


<p id="section_2">
ターゲットセクション
</p>


:target疑似クラス概説


CSS3では、:target疑似クラスを用いて、ターゲットとなる要素の表示のスタイルを定義したりすることができます。

◇　CSS定義例：
p.note:target { color : red; }
*:target { color : red; }



:target疑似クラス 使用例


次の例では、targetとする要素を黄色の背景色に付けるようにになります。

◇　:target疑似クラス使用例：
<style type="text/css">
/* ターゲットされた際に背景色を黄色に、フォントカラーを赤に表示 */
div.target01:target {
    color:red;
    background-color: yellow;
}
</style>

<p>
<a href="#tgt">ここをクリック</a>
<p>

<pre>
...

...
</pre>

<div id="tgt" class="target01">
<pre>
ターゲットされた際に背景色を黄色、フォントカラーを赤に表示します。


</pre>
</div>


※※※　以上のサンプルは以下から確認できます(Firefox2)　※※※

ここをクリック 

...


...

ターゲットされた際に背景色を黄色に表示します。


ブラウザーの対応状況


現在、:target 疑似クラスに対応しているブラウザは、Firefox、Gecko、Safari、Konquerorなど。IE や Opera は未対応。

参考資料


W3C：The target pseudo-class :target

有关作者
Syboos.jp編集長AJavaやオープンソース情報の執筆、Webサイトの開発や運営全般の業務に携わる。

Sponsored Link


Comments

☆☆☆

1 - Syboos.jp編集長A 2008/05/26 12:04

現在、:target 疑似クラスに対応しているブラウザは、Firefox、Gecko、Safari、Konquerorなど。IE や Opera は未対応。

  • Relative Articles