CSS4で追加される予定のセレクタを紹介するよっ

CSS Advent Calendar 2014 12日目です。二日連続ですがYuZakuroが担当します。

概要

CSS4のモジュールの一つであるSelectors Level 4にはセレクタについての記述があります。

尚、この規格は草案段階であり、変更される可能性があります。

今回は、その中でもリンクに関するセレクタを紹介したいと思います。

:any-link

a:link, a:visitedの両方を指します。

visitedでも色が変わらないようなデザインをすることはよくあります。そんなとき、CSS3では、下のように、わざわざlinkとvisitedの両方に同じ指定をしなければいけません。

CSS4では、:any-linkのみを指定するだけで実現できます。

css3

a:link a:visited { color: #fff }
a:hover { color: #aaa }

css4

a:any-link { color: #fff }
a:hover { color: #aaa }

:local-link

ターゲットが同一ドメイン内のリンク。サイト内部へのリンクと外部サイトへのリンクのCSSを区別させられます。

引数をつけて、:local-link(n)のように指定すると、n番目のパスまで一致しているリンクに合致する要素になります。

例えば、URLが http://yuh.me/foo/bar.html の場合、次の例では１つ目のリンクは赤い文字で表示されますが、2つ目のリンクは青い文字になります。

<style>
a { color: red }
a:local-link(1) { color: blue }
</style>

<a href="http://yuh.me/foo2/bar.html">Red</a>
<a href="http://yuh.me/foo/bar2.html">Blue</a>

:target

targetセレクタはCSS3ですでに存在しています
@hiroqn@githubさん、＠miyamacatさん、ご指摘いただきありがとうございます。

http://yuh.me/foo2/bar.html#2 のようなURLのとき、ページ内リンクが指している要素を示します。

例えば、次の例ではURLが http://yuh.me/foo2/bar.html#2 のとき、２つ目のヘッダの背景色が黄色になります。

<style>
*:target { background: yellow }
</style>
<section>
  <h1 id="1">Section 1</h1>
  ...
</section>
<section>
  <h1 id="2">Section 2</h1>
  ...
</section>
<section>
  <h1 id="3">Section 3</h1>
  ...
</section>

まとめ

CSS4で追加される、リンクに関するセレクタを3つ紹介しました。実は、あとひとつ:scopeというセレクタもあるのですが、正しく理解できている自身がなかったので省きました。

リンク以外にも、便利なセレクタが多数追加される予定のようですので、普及するのが楽しみですね。

参考

• Selectors Level 4