CSS3 Pre-Reference



:local-link

ローカルのX階層のリンク

試す

コード

a:local-link {...}
a:local-link(0) {...}
a:local-link(1) {...}
a:local-link(2) {...}
a:local-link(3) {...}

サンプル

指定されている色でリンクが記載されていれば、正しく適用されています。

ネイビー

緑色

紫色

赤色

普通のリンク色

コメントする


対応ブラウザ

Firefox
Chrome/Safari
Opera
InternetExplorer

パラメータ

レベル 4
参考文献 Selectors Level 4#7.3. The local link pseudo-class ‘:local-link’

解説

同サイト内のリンクを示します。正確には、同じFQDN(フルドメイン名)内のリンクを示します。

この疑似セレクタには関数記法があり、:local-link(X)とすることができます。Xには、トップからの階層の深さを数値で指定します。スタイルはX階層「まで」のリンクにスタイルを適用します。

例えば、以下のようなHTMLがあったとします:

  1. <a href="http://www.example.com">ホーム</a>
  2. <a href="http://www.example.com/financial.html">財務状況</a>
  3. <a href="https://www.example.com/novel/new_list.html">新書一覧</a>
  4. <a href="http://www.example.com/service/development/">アプリケーション開発</a>
  5. <a href="http://example.com/about/inquiry.html">弊社に関するお問合せ</a>

また、以下のようなスタイルがあるとします。

  1. a:local-link {...}
  2. a:local-link(0) {...}
  3. a:local-link(1) {...}
  4. a:local-link(2) {...}
  5. a:local-link(3) {...}

http://www.example.com/2011/03/に上記のスタイルを適用するとすると、

  1. リンク1には、同じFQDNのサイトのトップディレクトリであるため、スタイル2が適用されます。
  2. リンク2には、同じFQDNのサイトの第一階層であるため、スタイル2と3が適用されます。
  3. リンク3には、同じFQDNのサイトの第二階層であるため、スタイル 2, 3と4 が適用されます。
  4. リンク4には、同じFQDNのサイトで第三階層以降であるため、スタイル1 が適用されます。
  5. リンク5はFQDNが異なるため、どのスタイルも適用されません。

どうにも階層の解釈がおかしいように思います、例えばhttp://www.example.comとhttp://www.example.com/index.htmlは同じである可能性が高いですが、別のスタイルが適用されます。今後変更があるかも知れません。

トラックバック

投稿されたコメント