CSS3とは
従来のスタイルシートの最新版であり、これまでの仕様に対しさらに改良されいくつかの便利な機能が備わりました。
CSS3は未だ仕様策定中ではありますが、主要ブラウザでの対応は既に始まっており、今日様々なWebサイトで利用されています。
しかしながら、仕様策定段階であり正式に勧告されていない為、CSS3を利用する際は各ブラウザ用のベンダープレフィックスを付ける必要があります。
ベンダープレフィックスとは、各ブラウザが独自の拡張機能を実装する際にそれが拡張機能である事を明示する為に付ける接頭辞の事です。
| ブラウザ | ベンダープレフィックス |
| Mozilla Firefox | -moz- |
| Google Chrome、Apple Safari | -webkit- |
| Opera | -o- |
| Microsoft Internet Explorer | -ms- |
今回はCSS3で追加された特に重要なモジュールである、セレクタ、トランスフォーメーション、アニメーションを紹介します。
セレクタ
CSS3で追加されたセレクタを見る前にセレクタの概念について再度おさらいしましょう。
CSSはスタイルを適用する対象であるセレクタとスタイル情報を設定する宣言ブロックから構成されます。
p { color : #ff0000; }
この場合は、pが「セレクタ」であり、color : #ff0000が宣言ブロックとなり、更にcolorがプロパティ、そして#ff0000が値となります。
また、htmlの中で<p>〜</p>で括られた全体を「要素」と呼びます。
これらを踏まえたうえでCSS3に追加されたセレクタの一覧、並びに使い方を見ていきます。
| セレクタ | 説明 | 記述例 |
| E[foo^="bar"] | "foo" 属性の値が "bar" から始まる E 要素 | p[class^="test"] |
| E[foo$="bar"] | "foo" 属性の値が "bar" で終わる E 要素 | p[class$="test"] |
| E[foo*="bar"] | "foo" 属性の値に "bar" という文字列を含む E 要素 | p[class*="samp"] |
| E:root | 文書のルート要素であるE要素 | :root |
| E:nth-child(n) | n番目の子であるE要素 | p:nth-child(4) |
| E:nth-last-child(n) | 後ろから数えてn番目の子である E 要素 | p:nth-last-child(2) |
| E:nth-of-type(n) | n 番目にある E 要素 | p:nth-of-type(2) |
| E:nth-last-of-type(n) | 同じ型をもつ要素のうち後ろから数えて n 番目にある E 要素 | p:nth-last-of-type(3) |
| E:last-child | 最後の子である E 要素 | p:last-child |
| E:first-of-type | 同じ型をもつ要素のうちの最初の E 要素 | p:first-of-type |
| E:last-of-type | 同じ型をもつ要素のうち最後の E 要素 | p:last-of-type |
| E:only-child | 唯一の子である E 要素 | p:only-child |
| E:only-of-type | 同じ型をもつ要素が他にない唯一の E 要素 | p:only-of-type |
| E:empty | テキストノードを含め子を持たないE 要素 | p:empty |
| E:target | 参照URIの目標となっているE 要素 | :target:before |
| E:enabled | 有効 (:enabled) となっているE要素 | input[type="checkbox"]:enabled |
| E:disabled | 無効 (:disabled)となっているE要素 | input[type="checkbox"]:disenabled |
| E:checked | チェックボックスやラジオボタンなどでチェックされた状態のE要素 | input:checked |
| E:not(selector) | sであるセレクタ にマッチしない E要素 | :not(p) |
| E ~ F | E 要素のあとに現れる F 要素 | p~ul |
第1章 |  |
第2章 | |
第3章 | |
第4章 | |
