今回の勉強会はSelectors Level 4(CSS4セレクタ)についてです。
Selectors Level 4(CSS4セレクタ)の概要
Selectors Level 4の草案が2013年5月2日に更新されました。
Selectors Level 4
W3C Working Draft 2 May 2013
Selectors Level 4はCSS3セレクタの上位仕様なので、CSS4セレクタと言えるのですが、urlが/css3-selectors/から/selectors4/になっている事からもわかるように、CSSのセレクタという位置づけではなく、セレクタ単体として定義されています。
セレクタはもうCSSだけのものではないという事でしょう。
※Selectors Level 4の略し方がわからないので、この記事では便宜上、CSS4としています。
各セレクタの紹介
Selectors Level 4で新しく追加されたセレクタのみを紹介していきます。
※便宜上、サンプルコード内の各要素指定はクラスとしています。
要素に当てたいCSSはcolor:#c00、元はcolor:#333としています。
E:not(s1, s2)
E:not(s1, s2)はs1でもs2でもないE要素です。
CSS3でE:not(s)(sでないE要素)はありましたが、複数指定はできませんでした。
CSS3まででの書き方
E { color: #c00; } E.s1, E.s2 { color: #333; }
CSS4での書き方
E:not(.s1, .s2) { color: #c00; }
E:matches(s1, s2)
E:matches(s1, s2)はs1もしくはs2であるE要素です。
これまでもカンマ区切りで複数の要素を指定することができましたが、:matchesを使用することで短い記述で指定することが可能になり、可読性があがります。
CSS3まででの書き方
E.s1, E.s2 { color: #c00; }
CSS4での書き方
E:matches(s1, s2) { color: #c00; }
E[foo="bar" i]
E[foo="bar" i]は大文字小文字を区別せずにfoo属性の値がbarであるE要素です。
CSS3までは環境によって区別されたり区別されなかったりしましたが、明確に区別せずに一致させることができるようになります。
ひらがなとカタカナで区別しないような日本語対応がされる日がいつかは来るかもしれません。
E:dir(ltr)
E:dir(ltr)は文書の方向がltrであるE要素です。
左から右の言語(英語など)か、右から左(アラビア語など)によって指定することができます。
縦書きはどうなるのかは謎です。
E:lang(zh, *-hant)
E:lang(zh, *-hant)は言語がzhか-hantに後方一致するE要素です。
これまでも言語指定はできましたが、*-hantのように部分一致での指定方法が追加されました。
E:any-link
E:any-linkはリンク要素(<a>,<area>,<link>)のE要素です。
これまで:linkと:visitedの両方を記述していた指定を:any-linkと一つの記述で指定できるようになります。
上で紹介した:matches()を使用して:matches(:link, :visited)としても同じ指定になります。
CSS3まででの書き方
E:link, E:visited { color: #c00; }
CSS4での書き方
E:any-link { color: #c00; }
E:local-link
E:local-linkはリンク先が同じドメイン内であるE要素です。
内部リンクと外部リンクで違う指定を簡単に記述できるようになります。
CSS3まででの書き方
E[href^="/"], /*ルート相対パス*/ E[href^="."], /*ドキュメント相対パス*/ E[href^="http://www.innov-i.co.jp/"] /*絶対パス*/ { color: #c00; }
CSS4での書き方
E:local-link { color: #c00; }
E:local-link(0)
E:local-link(0)はリンク先が同じドメイン内で(0)階層目までディレクトリが同じE要素です。
ナビゲーションなどで同じディレクトリであれば、その中にいることを示す為に色を変えたりすることはよくありますが、今まではhtmlを作成時に変えるか、javascriptで同じディレクトリであるか判別して変えるなどをする必要がありましたが、E:local-link(0)を使用することでCSSのみで実現できるようになります。
E:scope
E:scopeは現在参照中であるE要素です。
Selectors API Level 2で使用するセレクタで、CSSで使用するためのものではありませんが、HTML5では<style>を記述した要素内だけにCSSを適用することができるようになるようです。
E:current
E:currentは時間軸で現在であるE要素です。
音声ブラウザなどで読み上げられている要素です。
E:current(s)
E:current(s)は時間軸で現在であるなかでsであるE要素です。
音声ブラウザなどで読み上げられている中でsである要素です。
E:past
E:pastは時間軸で過去であるE要素です。
音声ブラウザなどで読み上げが終わった要素です。
E:future
E:futureは時間軸で未来であるE要素です。
音声ブラウザなどで読み上げがまだ始まっていない要素です。
E:indeterminate
E:indeterminateは不確定状態であるE要素です。
チェックボックスで、チェックを入れもチェックを外しもしていない、つまり、触っていない状態などがこれにあたります。
E:default
E:defaultは既定値(初期値)であるE要素です。
<select>で、selectedが指定されている<option>が選択されている要素などがこれにあたります。
CSS3 UIでも定義されています。
E:in-range,E:out-of-range
E:in-rangeは入力値が範囲内であるE要素、E:out-of-rangeは入力値が範囲外であるE要素です。
HTML5では入力要素の属性としてstep,min,max,maxlengthなどを指定することで入力値の範囲を指定できますが、それと合わせて入力値が範囲内(:in-range)か範囲外(:out-of-range)かを指定することができます。
CSS3 UIでも定義されています。
E:required,E:optional
E:requiredは必須項目であるE要素、E:optionalは任意項目であるE要素です。
HTML5では入力要素にrequired属性を付けることによって必須項目とすることができますが、それと合わせて必須項目(:required)か任意項目(:optional)かを指定することができます。
CSS3 UIでも定義されています。
E:read-only,E:read-write
E:read-onlyは読み取り専用であるE要素、E:read-writeは読み書き可能であるE要素です。
HTML5ではreadonly属性を付けることによって読み取り専用とすることができますが、それと合わせて読み取り専用(:read-only)か読み書き可能(:read-write)かを指定することができます。
CSS3 UIでも定義されています。
E:nth-match(n of selector)
E:nth-match(n of selector)はn個目のselectorであるE要素です。
CSS3で:nth-child(n)(n個目の要素)はありましたが、これに追加でselectorも指定できるようになりました。
selector:nth-child(n)として似た指定ができますが、こちらはn個目でありかつselectorである要素となるので、意味が違います。
E:nth-last-match(n of selector)
E:nth-last-match(n of selector)は最後から数えてn個目のselectorであるE要素です。
CSS3で:nth-last-child(n)(最後から数えてn個目の要素)はありましたが、これに追加でselectorも指定できるようになりました。
selector:nth-last-child(n)として似た指定ができますが、こちらは最後から数えてn個目でありかつselectorである要素となるので、意味が違います。
E:column(selector)
E:column(selector)はグリッドまたはテーブル内のselectorである列のE要素です。
<table>内の<col>要素を指定するselectorにより、その列を指定できます。
記述方法は col.selected || td のような形になるようです。
E:nth-column(n)
E:nth-column(n)はグリッドまたはテーブル内のn列目であるE要素です。
:nth-childと同じように(2n)や(3n+1)なども指定できます。
E:nth-last-column(n)
E:nth-last-column(n)はグリッドまたはテーブル内の最後から数えてn列目であるE要素です。
:nth-last-childと同じように(2n)や(3n+1)なども指定できます。
E /foo/ F
E /foo/ FはE要素のfoo属性と同じ値のID属性を持つF要素です。
label:matches(:hover, :focus) /for/ input などとすれば、ラベルと入力項目をひも付けて指定することができます。
E! > F
E! > FはF要素の親要素であるE要素です。
!を付けた要素が指定する要素となります(E > F! > Gの場合はF要素)。
Selectors Level 4対応状況(2013年6月現在)
対応確認用の該当項目が赤く(#c00)なってれば対応しています。
緑(#0c0)になっている場合は、ベンダープレフィックス付きのみ対応しています。
※ベンダープレフィックスの付け方がよくわかっていないので、正しく付けたら対応しているものもあるかも知れない。
gc=Chrome 27,Fx=Firefox 21,IE=IE 10
セレクタ | 対応確認用 | gc | Fx | IE |
---|---|---|---|---|
E:not(s1, s2) |
Eのみ E+s1 E+s2 E+s1+s2 |
× | × | × |
E:matches(s1, s2) |
Eのみ E+s1 E+s2 E+s1+s2 |
× | × | × |
E[foo="bar" i] |
foo="bar" foo="BAR" FOO="bar" FOO="BAR" |
× | × | × |
E:dir(ltr) |
左から右 右から左 |
× | △ | × |
E:lang(zh, *-hant) |
zh zh-hant |
× | × | × |
E:any-link | リンク | △ | △ | × |
E:local-link |
絶対パス ルート相対パス ドキュメント相対パス |
× | × | × |
E:local-link(0) |
絶対パス ルート相対パス ドキュメント相対パス |
× | × | × |
E:scope |
スコープ内
スコープ外
|
× | × | × |
E:current E:current(s) E:past E:future |
現在 現在でs 過去 未来 |
× | × | × |
E:indeterminate | × | × | × | |
E:default | × | × | × | |
E:in-range E:out-of-range |
1-10の範囲内 1-10の範囲外 |
○ | × | × |
E:required E:optional |
必須入力 必須入力でない 任意入力 任意入力でない |
○ | ○ | ○ |
E:read-only E:read-write |
読み込み専用 読み書き可能 |
○ | △ | × |
E:nth-match(n of selector) |
selectorでない selector selectorでない 二つ目のselector(ここを指定) |
× | × | × |
E:column(selector) |
E:column(selector) col.selected || td |
× | × | × |
E:nth-column(n) | E:nth-column(n) | × | × | × |
E:nth-last-column(n) | E:nth-last-column(n) | × | × | × |
E /foo/ F |
|
× | × | × |
E! > F |
子要素にFがある > F 子要素にFがない |
× | × | × |
Selectors Level 4(CSS4セレクタ)まとめ
- CSSのためのものではない
- E:local-linkやE:columnなど、CSS3では実現不可能でjavascriptを書くか、HTMLに記述を足さなければいけなかったものが、CSSだけで実現できる
- E:matchesなどパターンを指定するものがあり、CSSの記述を短くできる(CSSgolfができる)
- 2013年6月現在では、まだ草案段階ということもあり、ほとんど対応していない
以上です。堤田