search
LoginSignup
11

More than 5 years have passed since last update.

posted at

updated at

Organization

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 の場合、次の例では1つ目のリンクは赤い文字で表示されますが、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 のとき、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というセレクタもあるのですが、正しく理解できている自身がなかったので省きました。

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

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
11